我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
您可以直接在JSX中执行相同的操作,使用map而不是for of循环:
render: function() {
const items = ['one', 'two', 'three'];
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
}
其他回答
如果在JSX中需要JavaScript代码,可以添加{},然后在这些括号中编写JavaScript代码。就这么简单。
同样,您可以在JSX/react中循环。
Say:
<tbody>
{`your piece of code in JavaScript` }
</tbody>
例子:
<tbody>
{ items.map((item, index) => {
console.log(item)}) ; // Print item
return <span>{index}</span>;
} // Looping using map()
</tbody>
您可以尝试新的for of循环:
const apple = {
color: 'red',
size: 'medium',
weight: 12,
sugar: 10
}
for (const prop of apple.entries()){
console.log(prop);
}
以下是几个示例:
如果你真的想要一个for循环等价物(你有一个数字,而不是一个数组),只需使用Lodash中的范围。
不要重新发明轮子,不要混淆代码。只需使用标准实用程序库。
import range from 'lodash/range'
range(4);
// => [0, 1, 2, 3]
range(1, 5);
// => [1, 2, 3, 4]
ES2015 Array.from,带有map函数+键
如果对.map()没有任何内容,可以使用Array.from()和map函数来重复元素:
<tbody>
{Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>
您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。
如果使用反应模板,您的示例如下:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>