React JSX <option> 标签数量

Question

我正在尝试使用以下函数用数组中的字符串值填充选项标签：

render: function(){
  var array = ['yes','no'];
  var opts = array.map(function(name){return <option>name</option>});
    return(
    <div>
      <select>{opts}</select>
    </div>
      );
 }

问题是我收到了

<option>name</option>
<option>name</option>

但我需要

<option>yes</option>
<option>no</option>

知道怎么做吗？

Answer 1

将name换成{}

var App = React.createClass({
  render: function(){
    var array = ['yes','no'];
    var opts  = array.map(function(name){
      return <option>{ name }</option>
    });
    
    return <div>
      <select>{opts}</select>
    </div>
  }
});

ReactDOM.render(<App />, document.getElementById('container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

React JSX <option> 标签数量

React JSX <option> tag population

reactjs

react-jsx