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

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

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


当前回答

你必须用JSX写:

<tbody>
    {
        objects.map((object, i) => (
            <ObjectRow obj={object} key={i} />
        ));
    }
</tbody>

其他回答

我使用这个:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS:千万不要忘记钥匙,否则会有很多警告!

只需使用带有ES6语法的map Array方法:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

不要忘记密钥属性。

只需使用.map()循环遍历集合,并从每个迭代返回带有道具的<ObjectRow>项。

假设对象是某处的数组。。。

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

您的JSX代码将编译成纯JavaScript代码,任何标记都将被ReactElement对象替换。在JavaScript中,不能多次调用函数来收集返回的变量。

这是非法的,唯一的方法是使用数组来存储函数返回的变量。

或者您可以使用Array.prototype.map来处理这种情况,Array.prototype.map自JavaScriptES5以来就可用。

也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数,就像Angular的ng repeat一样。

有多种方法可以做到这一点。JSX最终会被编译成JavaScript,所以只要你编写了有效的JavaScript,你就会很好。

我的回答旨在巩固这里已经介绍的所有精彩方式:

如果没有对象数组,只需输入行数:

在返回块中,创建一个Array并使用Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

在返回块之外,只需使用普通的JavaScript for循环:

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

立即调用的函数表达式:

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

如果您有一个对象数组

在返回块中,.map()将每个对象映射到<ObjectRow>组件:

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

在返回块之外,只需使用普通的JavaScript for循环:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

立即调用的函数表达式:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}