将 Item 作为 Props 传递给 React Native Drop Menu答案

【问题标题】：Passing in Items as Props to be used in React Native Drop Menu将 Item 作为 Props 传递给 React Native Drop Menu
【发布时间】：2021-05-12 14:15:48
【问题描述】：

我有一些 React 代码来呈现一个看起来像这样的 react-native-dropdown-picker DropMenu：

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 传递要在 DropMenu 中使用的值数组？

【问题讨论】：

你不应该从 props 创建派生状态。您应该将 props.items 和 props.setItems （来自祖先）直接传递给 DropDownPicker

标签： reactjs react-native react-native-dropdown-picker

【解决方案1】：

你可以使用

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

可以在here找到解决方案。

【讨论】：