我试图在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元素。就像这样-
const tbodyContent = [];
for (let i=0; i < numrows; i++) {
tbodyContent.push(<ObjectRow/>);
}
在身体内部使用它,如下所示:
<tbody>
{
tbodyContent
}
</tbody>
但我更喜欢map()而不是这个。
其他回答
在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将不会抛出错误,并显示白名单。
您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。
如果使用反应模板,您的示例如下:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>
我不确定这是否适用于您的情况,但通常地图是一个很好的答案。
如果这是使用for循环的代码:
<tbody>
for (var i=0; i < objects.length; i++) {
<ObjectRow obj={objects[i]} key={i}>
}
</tbody>
你可以用地图这样写:
<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>
只需使用.map()循环遍历集合,并从每个迭代返回带有道具的<ObjectRow>项。
假设对象是某处的数组。。。
<tbody>
{ objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>
…或者,您也可以准备一个对象数组,并将其映射到函数以获得所需的输出。我更喜欢这一点,因为它有助于我保持在渲染返回中没有逻辑的良好编码实践。
render() {
const mapItem = [];
for(let i =0;i<item.length;i++)
mapItem.push(i);
const singleItem => (item, index) {
// item the single item in the array
// the index of the item in the array
// can implement any logic here
return (
<ObjectRow/>
)
}
return(
<tbody>{mapItem.map(singleItem)}</tbody>
)
}