Question

我最近正在做我的最后一项任务。我正在寻找一种动态映射和渲染

的方法

<select>
<option></option>
</select>

代替手动渲染和创建许多不同的组件。我想传递一个道具来呈现我的选择选项下拉菜单。我不想手动传递diet，而是传递道具并呈现下拉菜单<SelectOption option={diet} optionList={optionList}>

有我目前正在使用的代码

const SelectOption = ({ optionList }) => {
  const { diet } = optionList;
  const dietOption = diet.map(item => {
    const { id, value, option } = item;
    return (
      <option key={id} id={id} value={value}>
        {option}
      </option>
    );
  });
  return <select onChange={handleChange}>{dietOption}</select>;
};

export default SelectOption;

这是配方数据：

const optionList = {
  popular: [
    {
      id: '123',
      name: 'Salad',
      value: 'Salad',
      option: 'Salad'
    },
    {
      id: '234',
      name: 'Pasta',
      value: 'Pasta',
      option: 'Pasta'
    },
    {
      id: '567',
      name: 'Burger',
      value: 'Burger',
      option: 'Burger'
    }
  ],
  meat: [
    {
      id: '567123',
      name: 'Chicken',
      value: 'Chicken',
      option: 'Chicken'
    },
    {
      id: '5673',
      name: 'Lamb',
      value: 'Lamb',
      option: 'Lamb'
    }
  ],
  diet: [
    {
      id: '3123',
      name: 'Keto',
      value: 'Keto',
      option: 'Keto'
    },
    {
      id: '53533',
      name: 'Dairy free',
      value: 'Dairy free',
      option: 'Dairy free'
    }
  ]
};

Answer 1

您可以使用Computed object property names and destructuring

const SelectOption = ({ optionList, innerOption }) => {
  // Option 1
  // const options = optionList[innerOption];

  // Option 2
  const { [innerOption]: options } = optionList;

https://codesandbox.io/s/react-example-lked4

动态映射和渲染数组对象

1 个答案: