在JSX中使用For循环
这个问题在这里已经有了答案:
使用地图,以便实际返回元素。 一个foreach不会返回任何东西。 您使用&&
也是无效的。
var graph =
<div className={"chartContent"}>
<div className="panel">
{DataRows.map(entry =>
<div key={entry.id} className="col-sm-2 graphPanel graphPanelExtra">
<div className="panel panel-primary">
<div style={{textAlign: 'center'}}>entry</div>
</div>
</div>
)}
</div>
</div>;
请注意,我添加了一个key
属性 - 为了响应优化元素数组的渲染,每个项目应该有一个唯一键(不仅仅是数字索引)。
而不是使用forEach
循环,你可以使用Array.prototype.map()
var graph =
<div className={"chartContent"}>
.
.
.
<div className="panel">
{DataRows.map((entry) => (
<div className="col-sm-2 graphPanel graphPanelExtra">
<div className="panel panel-primary">
<div style={{textAlign: 'center'}}>entry</div>
</div>
</div>
)
)}
</div>
</div>;
forEach
不返回任何内容。 你不会看到任何结果。 相反,你可以使用.map
例如
{
DataRows.map(function (entry) {
return <div className="col-sm-2 graphPanel graphPanelExtra">
<div className="panel panel-primary">
<div style={{textAlign: 'center'}}>entry</div>
</div> < /div>
})
}
链接地址: http://www.djcxy.com/p/52043.html