选择中的渲染选项失败

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是array，其中包含选项数据，为了从此ui创建array，您需要使用任意loop来迭代array 1}}，使用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'/>

Answer 2

您需要映射道具并重新调整选项字段，如

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

示例代码段

class App extends React.Component {

    render() {
        var floors = [{
    "floor_id": "1",
    "name": "UG"
}, {
    "floor_id": "2",
    "name": "G"
}, {
    "floor_id": "3",
    "name": "LG"
}]
        return (
        <select>
            {
                floors.map((item) => {
                     return (
                          <option key={item.floor_id} value={item.floor_id}>
                    {item.name}
                </option>
                     )
                 })
            }
            </select>
        )

    }

}

ReactDOM.render(<App/>, 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"></div>