您可以将工作站列表映射到ReactElements。
使用React> =
16时,可以从同一组件返回多个元素,而无需额外的html元素包装器。从16.2开始,有一种新的语法<>可以创建片段。如果这不起作用或您的IDE不支持,则可以
<React.Fragment>改用。在16.0和16.2之间,可以对片段使用非常简单的polyfill。
尝试以下
// Modern syntax >= React 16.2.0const Test = ({stations}) => ( <> {stations.map(station => ( <div className="station" key={station.call}>{station.call}</div> ))} </>);// Modern syntax < React 16.2.0// You need to wrap in an extra element like div hereconst Test = ({stations}) => ( <div> {stations.map(station => ( <div className="station" key={station.call}>{station.call}</div> ))} </div>);// old syntaxvar 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/



