我试图在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中需要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>
其他回答
如果numrows是一个数组,则非常简单:
<tbody>
{numrows.map(item => <ObjectRow />)}
</tbody>
React中的数组数据类型要好得多。一个数组可以支持一个新的数组,并支持过滤、减少等。
我见过一个人/以前的答案在数组中使用.contat(),但不是这样。。。
我已经使用concat添加到字符串中,然后通过jQuery选择器在元素上呈现JSX内容:
let list = "<div><ul>";
for (let i=0; i<myArray.length; i++) {
list = list.concat(`<li>${myArray[i].valueYouWant}</li>`);
}
list = list.concat("</ul></div>);
$("#myItem").html(list);
简单的方法
您可以将numrows置于状态,并使用map()代替for循环:
{this.state.numrows.map((numrows , index) => {
return (
<ObjectRow
key={index}
/>
如果您真的想在JSX中使用for循环,可以使用IIFE。
<tbody>
{
(function () {
const view = [];
for (let i = 0; i < numrows; i++) {
view.push(<ObjectRow key={i}/>);
}
return view;
}())
}
</tbody>
您还可以使用自调用函数:
return <tbody>
{(() => {
let row = []
for (var i = 0; i < numrows; i++) {
row.push(<ObjectRow key={i} />)
}
return row
})()}
</tbody>