我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。
如果使用反应模板,您的示例如下:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
其他回答
在React中使用map是迭代数组的最佳实践。
为了防止ES6出现一些错误,React中使用了如下语法映射:
<tbody>
{items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>
在这里,您调用一个组件<ObjectRow/>,因此不需要在箭头后面加括号。
但你也可以这样做:
{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}
Or:
{items.map((item, index) => {
// Here you can log 'item'
return (
<ObjectRow key={index} name={item.name} />
)
})}
我这么说是因为如果在箭头后面加上括号“{}”,React将不会抛出错误,并显示白名单。
如果你真的想要一个for循环等价物(你有一个数字,而不是一个数组),只需使用Lodash中的范围。
不要重新发明轮子,不要混淆代码。只需使用标准实用程序库。
import range from 'lodash/range'
range(4);
// => [0, 1, 2, 3]
range(1, 5);
// => [1, 2, 3, 4]
我用它就像
<tbody>
{ numrows ? (
numrows.map(obj => { return <ObjectRow /> })
) : null
}
</tbody>
如果numrows是一个数组,则非常简单:
<tbody>
{numrows.map(item => <ObjectRow />)}
</tbody>
React中的数组数据类型要好得多。一个数组可以支持一个新的数组,并支持过滤、减少等。
return (
<table>
<tbody>
{
numrows.map((item, index) => {
<ObjectRow data={item} key={index}>
})
}
</tbody>
</table>
);