我试图在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的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
简单的方法
您可以将numrows置于状态,并使用map()代替for循环:
{this.state.numrows.map((numrows , index) => {
return (
<ObjectRow
key={index}
/>
其他回答
使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式,非常有效,也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法,而是首选的方法。
此外,不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引,但不建议使用生成的索引,但如果您的值是唯一的或存在唯一的键,则可以使用它们:
<tbody>
{numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>
此外,如果您不熟悉Array上的map函数,MDN中的几行代码:
map为数组,并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用,包括未定义的。对于缺少数组(即从未设置过的索引删除或从未被赋值)。回调是用三个参数调用的:元素的值,元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数,它将用作callback就是这个值。否则,未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组(尽管回调(如果调用)可能会这样做)。
在JSX块中围绕JavaScript代码使用{},使其正确执行您尝试执行的任何JavaScript操作。
<tr>
<td>
{data.map((item, index) => {
{item}
})}
</td>
</tr>
这有点模糊,但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象,那么您将希望通过执行以下操作来实现这一目标:
<td>{item.someProperty}</td>
在这种情况下,您将希望用不同的td包围它,并以不同的方式排列前面的示例。
您可以尝试新的for of循环:
const apple = {
color: 'red',
size: 'medium',
weight: 12,
sugar: 10
}
for (const prop of apple.entries()){
console.log(prop);
}
以下是几个示例:
在映射中包含JSX内容可能是笨拙的语法。相反,您可以这样做:
const ObjectRow = ({ ... }) => <tr key={}>...</tr>
const TableBody = ({ objects }) => {
return <tbody>{objects.map(ObjectRow)}</tbody>;
}
这是
{ objects.map(object => ObjectRow(object))
如果将ObjectRow设置为使用对象中的相同键,这将非常有用。
注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。
更多注释-我遇到过一些地方,这种技术是个坏主意。例如,它不会通过正常的创建组件路径,也不会默认属性值,所以要小心。尽管如此,了解它很方便,有时也很有用。
您只能在JSX元素中编写JavaScript表达式,因此for循环无法工作。您可以先将元素转换为数组,然后使用map函数渲染它:
<tbody>
{[...new Array(numrows)].map((e) => (
<ObjectRow/>
))}
</tbody>