React-form-select动态添加option

经常会碰到表单中将从服务器请求到的数据显示在一个列表中，尤其是在表单操作的过程当中，需要动态生成html显示在<select></select>的<option></option>下拉框中，简单纪录下此做法。

首先定义一段假数据，在render中return组件

 export default React.createClass({
   getInitialState: function() {
     model: {
       selectPlatform: [
         {key: 1, value: 'IOS'},
         {key: 2, value: 'Android'},
         {key: 3, value: 'Web'},
       ]
     }
   },
   render: function() {
     const model = this.state.model;
     return(
       <div>
         //假设已经有这样一个component，其下有一个下拉选择框，model为孩子获取对象数组中的内容进行预数据处理
         //添加多个
         <FormComponent.Select model={model.selectVersion} defaultValue="平台"/>
         <FormComponent.Select model={model.selectVersion} defaultValue="版本"/>
       </div>
     )
   }
 })

添加组件<FormComponent/>

var FormComponent = React.createClass({
  render: function() {
    return(
      <div>
        //你的其它组件
      </div>
    )
  }
})

添加<FormComponent/>的子组件

FormComponent.Select = React.createClass({
   render: function() {

     //核心代码
     const options = this.props.model.map(function(model){
         return <option key={model.key} value={model.value}>{model.value}</option>
     });

     return(
       <div className="col-sm-3 form-group" style={{marginTop:"25px"}}>
         <select name="" id="" className="form-control">
           <option defaultValue={this.props.defaultValue}>{this.props.defaultValue}</option>
             //将上述定义的`options`添加到`select`中
             {options}
         </select>
       </div>
     )
   }
});

这里涉及到一个细节就是在上述代码书写的过程中，react遍历option的过程，必须含有key这个属性，不然浏览器会报错，这里与Angular相同，react和Angular都不允许出现相同的值，如果有相同的值，浏览器会报错：不能处理。因此必须添加key。

效果如下：