Блог

Главная - Вопросы по программированию - Передача элементов в качестве реквизитов для использования в раскрывающемся меню React Native

Передача элементов в качестве реквизитов для использования в раскрывающемся меню React Native

#reactjs #react-native #react-native-dropdown-picker

Вопрос:

У меня есть некоторый код реакции для отображения выпадающего меню react-native-dropdown-picker, которое выглядит так:

 export const DropMenu = () => {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(null);
   const [items, setItems] = useState([
     { label: 'A', value: 'a' },
     { label: 'B', value: 'c' },
     { label: 'C', value: 'c' }
   ]);
    
   return (
     <DropDownPicker
       open={open}
       value={value}
       items={items}
       setOpen={setOpen}
       setValue={setValue}
       setItems={setItems}
     />
   );
 }

Что я хотел бы сделать, так это сделать это пригодным для повторного использования, просто передав детали реализации для items использования в меню. Как бы это выглядело? Что-то вроде этого, используя оператор распространения? Мне неясно, как конкретно будет выглядеть синтаксис:

 export const DropMenu = props => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
  const [items, setItems] = useState([
    { 
      label: [...props.items.label], 
      value: [...props.items.value] 
    }
   ]);
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

И я бы передал реквизит, который выглядит так:

 const items = [
​ { label: 'A', value: 'a' },
 { label: 'B', value: 'c' },
 ​{ label: 'C', value: 'c' }
];

Как я могу передать массив значений, которые будут использоваться в раскрывающемся меню через props ?

Комментарии:

1. вы не должны создавать производное состояние из реквизитов. вы должны передать props.items и props.setItems (исходящие от предка) непосредственно в DropDownPicker

Ответ №1:

Вы можете использовать

 const [items, setItems] = useState([...props.items])

Решение можно найти здесь.

Метки: