我想在React JSX
中做以下事情(其中ObjectRow是一个独立的组件)。
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我知道并理解为什么这不是有效的JSX
,因为JSX
映射到函数调用。然而,我来自模板领域,并且是`JSX'的新手,我不确定如何实现上述内容(多次添加一个组件)。
把它想成是你在调用JavaScript函数。你不能使用for
循环,因为函数调用的参数会在那里。
return tbody(
for (var i = 0; i < numrows; i++) {
ObjectRow()
}
)
请看函数tbody
是如何被传递给一个for
循环作为参数的,当然这也是一个语法错误。
但是你可以做一个数组,然后把它作为一个参数传进去。
var rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(ObjectRow());
}
return tbody(rows);
在使用JSX时,你可以使用基本相同的结构。
var rows = [];
for (var i = 0; i < numrows; i++) {
// note: we add a key prop here to allow react to uniquely identify each
// element in this array. see: https://reactjs.org/docs/lists-and-keys.html
rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;
顺便说一下,我的JavaScript例子几乎正是JJSX的那个例子所转化的。玩玩Babel REPL,感受一下JSX的工作原理。
不知道这对你的情况是否有效,但往往地图是一个好的答案。
如果这是你带有for循环的代码。
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用map这样写。
<tbody>
{objects.map(function(object, i){
return <ObjectRow obj={object} key={i} />;
})}
</tbody>
ES6的语法。
<tbody>
{objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
我知道这是个老话题,但你可能想看看React Templates,它确实可以让你在react中使用jsx风格的模板,有一些指令(如rt-repeat)。
你的例子,如果你使用react-templates,将是。
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>