javascript - 选择中的渲染选项失败

Question

这样做有什么问题

    <option key={this.props.floors} value={this.props.floors.floor_id}>
        {this.props.floors.name}
    </option>

这是我的数据

[{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]

我在下拉列表中没有看到任何填充选项。

Answer 1

Floors 是一个包含选项数据的数组，为了从这个数组创建ui，您需要使用任何loop 来迭代 array，使用 map 检查此示例:

var floors = [{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]

class App extends React.Component{

   render(){
      return <select>
                 {
                    this.props.floors.map(floor => <option key={floor.floor_id} value={floor.floor_id}>
                                                      {floor.name}
                                                   </option>)
                 }
             </select>
   }

}

ReactDOM.render(<App floors = {floors}/>, document.getElementById('app'))

<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='app'/>