从对象数组呈现反应组件

javascript reactjs

2022-08-30 04:12:53

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

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 元素？

答案 1

您可以将工作站列表映射到 ReactElements。

使用 React >= 16，可以从同一组件返回多个元素，而无需额外的 html 元素包装器。从 16.2 开始，有一个新的语法<>来创建片段。如果这不起作用或 IDE 不支持，则可以改用。在 16.0 和 16.2 之间，您可以使用非常简单的多边形填充来填充片段。<React.Fragment>

请尝试以下操作

// Modern syntax >= React 16.2.0
const Test = ({stations}) => (
  <>
    {stations.map(station => (
      <div key={station.call} className='station'>{station.call}</div>
    ))}
  </>
); 

// Modern syntax < React 16.2.0
// You need to wrap in an extra element like div here

const Test = ({stations}) => (
  <div>
    {stations.map(station => (
      <div className="station" key={station.call}>{station.call}</div>
    ))}
  </div>
); 

// old syntax
var Test = React.createClass({
    render: function() {
        var stationComponents = this.props.stations.map(function(station) {
            return <div className="station" key={station.call}>{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
    }
});
 
var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 

ReactDOM.render(
  <div>
    <Test stations={stations} />
  </div>,
  document.getElementById('container')
);

不要忘记属性！key

https://jsfiddle.net/69z2wepo/14377/

答案 2

我有一个答案，对于像我这样的新手来说可能不那么令人困惑。您只能在组件渲染方法中使用。map

render () {
   return (
       <div>
           {stations.map(station => <div key={station}> {station} </div>)} 
       </div>
   );
}