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

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

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


当前回答

您可以创建如下新组件:

将键和数据传递给ObjectRow组件,如下所示:

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

创建新组件ObjectRowList,使其充当数据的容器:

export const ObjectRowList = (objectRows) => {
    return (
      <tbody>
        {objectRows.map((row, index) => (
          <ObjectRow key={index} data={row} />
        ))}
      </tbody>
    );
}

其他回答

如果您真的想在JSX中使用for循环,可以使用IIFE。

<tbody>
  {
    (function () {
      const view = [];
      for (let i = 0; i < numrows; i++) {
        view.push(<ObjectRow key={i}/>);
      }
      return view;
    }())
  }
</tbody>

除非声明函数并用参数将其括起来,否则这是不可能的。在JSXExpression中,您只能编写表达式,而不能编写诸如for()、声明变量或类或if()语句之类的语句。

这就是为什么函数CallExpressions现在如此流行的原因。我的建议是:习惯它们。我会这样做:

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

过滤:

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

if():

var names = getNames()
const people = {names && names.length &&
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

如果-其他:

var names = getNames()
const people = {names && names.length ?
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

您只能在JSX元素中编写JavaScript表达式,因此for循环无法工作。您可以先将元素转换为数组,然后使用map函数渲染它:

<tbody>
    {[...new Array(numrows)].map((e) => (
         <ObjectRow/>
    ))}
</tbody>

试试这个

<tbody>
  {new Array(numrows).map((row,index)=><ObjectRow key={***someThingUniqe***}/>)} //don't use index as key 
</tbody>

如果您想知道为什么不应该在react中使用索引作为键,请检查此项

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

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

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

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

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