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

Question

如果我想更换选项

<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>

最好的祝福

蓝色

Answer 1

因为它只是javascript,有百万种方式.我通常采用的方法是映射容器以生成内脏.for循环或其他什么也可以正常工作.

var Answer = react.createClass({

    render: function() {

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


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

    }

};

或者在更现代的反应中,你可以做到

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

Answer 2

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

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