可以将桩号列表映射到图元.
使用React>;=16,可以从同一组件返回多个元素,而不需要额外的html元素包装器.从16.2开始,有new syntax <>个程序可以创建片段.如果这不起作用或IDE不支持,可以使用<React.Fragment>
.在16.0和16.2之间,可以使用非常简单的polyfill来表示片段.
试试下面的方法
// 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/