如何使用数组作为反应选择组件的选项答案

【问题标题】：How to use an array as option for react select component如何使用数组作为反应选择组件的选项
【发布时间】：2015-10-03 11:16:18
【问题描述】：

如果我想替换选项

<option value="A">Apple</option>
<option value="B">Banana</option>

在给定的示例中，通过在 react jsx 文件中使用数组，我将如何进行？

<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
</select>

【问题讨论】：

标签： select reactjs

【解决方案1】：

因为它只是 javascript，所以有一百万种方法。我通常采取的方式是映射容器以生成胆量。一个 for 循环或其他也可以正常工作。

const Answer = react.createClass({

    render: function() {

        var Data     = ['this', 'example', 'isnt', 'funny'],
            MakeItem = function(X) {
                return <option>{X}</option>;
            };


        return <select>{Data.map(MakeItem)}</select>;

    }

};

或者在 es6 中更现代的 react 你可以

const Answer = props => 
  <select>{
    props.data.map( (x,y) => 
      <option key={y}>{x}</option> )
  }</select>;

【讨论】：

【解决方案2】：

您还可以将常量抽象到另一个文件中并导入它们。

import {myconstants} from "../constants";

{myconstants.map((x,y) => <option key={y}>{x}</option>)}

【讨论】：

【解决方案3】：

您通常需要提供唯一的密钥以确保 React 可以识别项目，您可以使用 uuid 或您手头的密钥来执行此操作，例如

  <Select name={field}>
    {FBButtons.map(fbb =>
      <option key={fbb.key} value={fbb.key}>{fbb.value}</option>
    )};
  </Select>

【讨论】：