reactjs - 将项目作为 Props 传递以在 React Native Drop Menu 中使用

Question

我有一些 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' }
];

如何通过传递要在 DropMenu 中使用的值数组props？

Answer 1

您可以使用

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

可以在这里找到解决方案。