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

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

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


当前回答

我找到了另一个解决方案提供:

 <tbody>{this.getcontent()}</tbody>

还有一个单独的功能:

getcontent() {
    const bodyarea = this.state.movies.map(movies => (
        <tr key={movies._id}>
            <td>{movies.title}</td>
            <td>{movies.genre.name}</td>
            <td>{movies.numberInStock}</td>
            <td>{movies.publishDate}</td>
            <td>
                <button
                    onClick={this.deletMovie.bind(this, movies._id)}
                    className="btn btn-danger"
                >
                    Delete
                </button>
            </td>
        </tr>
    ));
    return bodyarea;
}

这个例子很容易解决许多问题。

其他回答

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

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

随着时间的推移,语言越来越成熟,我们经常会遇到这样的常见问题。问题是循环组件“n”次。

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

其中,n-是要循环的次数。项将未定义,索引将照常。此外,ESLint不鼓励使用数组索引作为键。

但是,您的优点是不需要在之前初始化数组,最重要的是避免了for循环。。。

为了避免项目未定义带来的不便,您可以使用_,这样在进行linting时就会忽略它,并且不会引发任何linting错误,例如

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

可以在reactjs中对循环使用.map()

    <tbody>
        {items.map((value, index) => {
          return <li key={index}>{value}</li>
        })}
      </tbody>
)

不能在JSX中直接使用任何循环或其他额外方法。相反,您可以做的是为其生成单独的函数,并生成循环语句,然后在该函数中返回组件上述代码示例:

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

<tbody>
{renderObjectRow()}
</tbody>


使用映射到循环

 Array.map(arrayItem => {
return <ObjectRow arrayItem={arrayItem}/> // pass array item in component
})