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

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

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


当前回答

也可以在返回块外部提取:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

其他回答

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

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

不要忘记密钥属性。

Array.from是最好的方法。如果您想创建一个具有一定长度的JSX数组。

function App() {
  return (
    <tbody>
      {Array.from({ length: 10 }, (_, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </tbody>
  );
}

上面的示例适用于没有数组的情况,因此,如果您有数组,则应在JSX中将其映射为:

function App() {
  return (
    <tbody>
      {list.map((item, key) => (
        <ObjectRow {...{ key }} />
      ))}
    </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>

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

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

import _ from 'lodash';

...

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

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

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

您可以在React for循环中使用.map()。

<tbody>
    { newArray.map(() => <ObjectRow />) }
</tbody>