从对象数组渲染React组件

JavaScript

泡芙Gil

2020-03-12

我有一些称为站的数据，它是一个包含对象的数组。

stations : [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]

我想为每个数组位置渲染一个ui组件。到目前为止，我可以写

 var stationsArr = []
 for (var i = 0; i < this.data.stations.length; i++) {
     stationsArr.push(
         <div className="station">
             {this.data}
         </div>
     )
 }

然后渲染

render(){
 return (
   {stationsArr}
 )
}

问题是我要打印所有数据。相反，我只想显示一个像这样的键，{this.data.call}但是什么也不打印。

如何遍历此数据并为数组的每个位置返回一个新的UI元素？

第1176篇《从对象数组渲染React组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
LEY神乐 2020.03.12

对于一个像我这样的新手，我的答案可能会有些混乱。您可以map在组件内部使用render方法。

render () {
   return (
       <div>
           {stations.map(station => <div> {station} </div>)} 
       </div>
   );
}
L十三 2020.03.12

this.data 大概包含所有数据，因此您需要执行以下操作：

var stations = [];
var stationData = this.data.stations;

for (var i = 0; i < stationData.length; i++) {
    stations.push(
        <div key={stationData[i].call} className="station">
            Call: {stationData[i].call}, Freq: {stationData[i].frequency}
        </div>
    )
}

render() {
  return (
    <div className="stations">{stations}</div>
  )
}

或者map，如果您使用的是ES6，则可以使用和箭头功能：

const stations = this.data.stations.map(station =>
    <div key={station.call} className="station">
      Call: {station.call}, Freq: {station.frequency}
    </div>
);

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android