我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
这里有一个简单的解决方案。
var Object_rows = [];
for (var i = 0; i < numrows; i++) {
Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;
不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。
其他回答
这可以通过多种方式实现。
如上所述,在返回之前,存储数组中的所有元素回路内部回路方法1:让容器=[];让arr=[1,2,3]//可以是任何数组、对象arr.forEach((val,索引)=>{容器推送(<div key={index}>值</div>)/*** 1. 所有循环生成的元素都需要密钥* 2. 数组中只能放置一个父元素*例如container.push(*<div key={index}>值</div><div>这将引发错误</div>)**/});返回(<div><div>这里有任何东西</div><div>{container}</div></div>)方法2:返回(<div><div>这里有任何东西</div><div>{(() => {让容器=[];让arr=[1,2,3]//可以是任何数组、对象arr.forEach((val,索引)=>{容器推送(<div key={index}>值</div>)});返回容器;})()}</div></div>)
您可以执行以下操作:
let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}
我用它就像
<tbody>
{ numrows ? (
numrows.map(obj => { return <ObjectRow /> })
) : null
}
</tbody>
也许是当今最大开发者的标准,使用这样的结构:
let data = [
{
id: 1,
name: "name1"
},
{
id: 2,
name: "name2"
},
{
id: 3,
name: "name3"
},
{
id: 100,
name: "another name"
}
];
export const Row = data => {
return (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.name}</td>
</tr>
);
};
function App() {
return (
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>{data.map(item => Row(item))}</tbody>
</table>
);
}
在JSX中,在HTML或任何代码中编写JavaScript操作,{data.map(item=>Row(item))},在map函数中使用单花括号。了解更多地图信息。
这里还可以看到以下输出。
您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。
如果使用反应模板,您的示例如下:
<tbody>
<ObjectRow rt-repeat="obj in objects"/>
</tbody>