如何使用 React.CreateElement() 从数组动态生成 <select> 的菜单选项答案

【问题标题】：How dynamically generate menu options for <select> from an array using React.CreateElement()如何使用 React.CreateElement() 从数组动态生成 <select> 的菜单选项
【发布时间】：2021-09-24 21:32:01
【问题描述】：

这里是手动生成选项的代码。无论如何要从数组或 json 动态填充选项

    return React.createElement("select", {},
      React.createElement("option", {value: "A"}, "Option A"),
      React.createElement("option", {value: "B"}, "Option B"),
      React.createElement("option", {value: "C"}, "Option C")
    );
  }

【问题讨论】：

标签： javascript arrays reactjs react-native

【解决方案1】：

我强烈推荐编译 JSX，你可以很容易地使用 .map 回调返回一个组件：

const values = ['A', 'B', 'C'];
// ...
return (
  <select>
    {values.map(val => <option value={val}>{val}</option>)}
  </select>
);

如果你不能使用 JSX（尽管你真的应该处理任何严重的事情，因为它使语法更容易），你可以将结果传播到 createElement。

return React.createElement("select", {},
  ...values.map(value => React.createElement("option", { value }, value))
);

【讨论】：

完美！感谢您的疯狂快速回复。像魅力一样工作

【解决方案2】：

const values = ['A', 'B', 'C'];
// ...
return (
  <select>
    {values.map((val, i) => <option key={i} value={val}>{val}</option>)}
  </select>
);

不要忘记添加 key prop，因为 React 会抱怨它

【讨论】：