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

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

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


当前回答

您可以执行以下操作来重复组件numrows次

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

其他回答

您可以执行以下操作来重复组件numrows次

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

如果numrows是一个数组,则非常简单:

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

React中的数组数据类型要好得多。一个数组可以支持一个新的数组,并支持过滤、减少等。

我不确定这是否适用于您的情况,但通常[map][1]是一个很好的答案。

如果这是使用for循环的代码:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

你可以用map函数这样写:

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

objects.map是进行循环的最佳方式,objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法(它返回布尔值)。

您可以创建如下新组件:

将键和数据传递给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>
    );
}

如果选择在render方法的return()内部转换此值,最简单的方法就是使用map()方法。使用Map()函数将数组映射到JSX语法,如下所示(使用ES6语法)。


在父组件内部:

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>

请注意,key属性已添加到子组件中。如果没有提供密钥属性,您可以在控制台上看到以下警告。

警告:数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。

注意:人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式,您可以在这里阅读有关它的更多信息。简而言之,如果它不是一个静态列表,就不要使用索引作为键。


现在,在ObjectRow组件中,可以从对象的财产访问该对象。

在ObjectRow组件内部

const { object } = this.props

Or

const object = this.props.object

这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在,您可以根据您的目的吐出该对象中的值。


参考文献:

JavaScript中的map()方法

ECMAScript 6或ES6