JSX中使用For循环
问题描述:
你可以在JSX中使用for
循环吗?
或者更确切地说,写这样一个for
的方法是什么?JSX中使用For循环
var graph =
<div className={"chartContent"}>
.
.
.
<div className="panel">
{DataRows.forEach(function(entry) &&
<div className="col-sm-2 graphPanel graphPanelExtra">
<div className="panel panel-primary">
<div>entry</div>
</div>
</div>
)}
</div>
</div>;
答
使用一个map所以你实际上返回的元素。一个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
不返回任何东西。你不会看到任何结果。相反,您可以使用.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>
})
}
答
比使用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>;
你好多米尼克。如果它的“(entry)”是一个Key Value对。你如何分离价值观?请。 – morne
条目是一个对象?在这种情况下,你可以做'Object.keys(entry).map(...' –
是的,抱歉,刚才看到了。谢谢 – morne