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

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

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


当前回答

在JSX块中围绕JavaScript代码使用{},使其正确执行您尝试执行的任何JavaScript操作。

<tr>
  <td>
    {data.map((item, index) => {
      {item}
    })}
  </td>
</tr>

这有点模糊,但您可以为任何阵列交换数据。这将为每个项提供一个表行和表项。如果阵列的每个节点中都有不止一个对象,那么您将希望通过执行以下操作来实现这一目标:

<td>{item.someProperty}</td>

在这种情况下,您将希望用不同的td包围它,并以不同的方式排列前面的示例。

其他回答

这可以通过多种方式实现。

如上所述,在返回之前,存储数组中的所有元素回路内部回路方法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>)

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

您可以执行以下操作:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

有趣的是,人们如何使用更新的语法或不常见的方法来创建数组,从而给出“创造性”的答案。在我使用JSX的经验中,我见过这些技巧,只有经验不足的React程序员才会使用。

解决方案越简单,对未来的维护人员就越好。由于React是一个web框架,通常这种类型的(表)数据来自API。因此,最简单和最实用的方法是:

const tableRows = [
   {id: 1, title: 'row1'}, 
   {id: 2, title: 'row2'}, 
   {id: 3, title: 'row3'}
]; // Data from the API (domain-driven names would be better of course)
...

return (
   tableRows.map(row => <ObjectRow key={row.id} {...row} />)
);



@jacefarm如果我理解正确,您可以使用以下代码:

<tbody>
    { new Array(numrows).fill(<ObjectRow/>) } 
</tbody>

您可以使用以下代码:

<tbody>
   { new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) } 
</tbody>

还有这个:

<tbody>
    new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>