我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。


当前回答

使用Array映射函数是一种非常常见的循环遍历元素数组并在React中根据元素创建组件的方法。这是一种很好的循环方式,非常有效,也是在JSX中进行循环的一种整洁的方式。这不是唯一的方法,而是首选的方法。

此外,不要忘记根据需要为每个迭代提供唯一的Key。map函数从0创建一个唯一索引,但不建议使用生成的索引,但如果您的值是唯一的或存在唯一的键,则可以使用它们:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

此外,如果您不熟悉Array上的map函数,MDN中的几行代码:

map为数组,并根据结果构造一个新数组。回调仅对具有赋值的数组的索引调用,包括未定义的。对于缺少数组(即从未设置过的索引删除或从未被赋值)。回调是用三个参数调用的:元素的值,元素的索引和正在遍历的Array对象。如果向映射提供了thisArg参数,它将用作callback就是这个值。否则,未定义的值将用作这就是它的价值。回调最终可观察到的值为根据通常的规则确定通过函数。map不会改变调用它的数组(尽管回调(如果调用)可能会这样做)。

其他回答

我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。

所以我可能会做一些类似的事情:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

诚然,这是一个很小的代码量,内联它可能会很好。

如果在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>

您可能需要签出React Templates,它允许您在React中使用JSX样式的模板,并带有一些指令(例如rt repeat)。

如果使用反应模板,您的示例如下:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

好了,给你。

{
    [1, 2, 3, 4, 5, 6].map((value, index) => {
        return <div key={index}>{value}</div>
    })
}

您所要做的只是映射数组并返回任何要渲染的内容。请不要忘记在返回的元素中使用key。

在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将不会抛出错误,并显示白名单。