这样做有什么问题
<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"
}]
我在下拉列表中没有看到任何填充选项。
最佳答案
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'/>
关于javascript - 选择中的渲染选项失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43404855/