select - 如何使用数组作为 react 选择组件的选项

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 循环或其他任何东西也可以正常工作。

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