如何在ReactJS中循环添加同一个组件？

Number of views 49
webfrontend reactjs

我通过一个for循环尝试在React JSX添加同一个组件（其中ObjectRow是一个单独的组件）：

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

eslint提示了报错，但是我是新手，我不确定如何实现上述目标（多次添加组件）

LV真香12
1 Answers

在 React 中，你不能直接在 JSX 中使用 for 循环。你需要将循环逻辑放在 JavaScript 代码块中，并将生成的元素存储在一个数组中，然后在 JSX 中渲染这个数组。

以下是如何在 React 中多次添加同一个组件的方法：

import React from 'react';

class MyComponent extends React.Component {
    render() {
        const numrows = 5; // 你可以根据需要更改这个值
        const rows = [];

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

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

// 假设 ObjectRow 是你定义的另一个组件
function ObjectRow() {
    return <tr><td>Row {Math.random()}</td></tr>;
}

export default MyComponent;

解释

  1. 创建一个空数组：我们创建了一个空数组 rows 来存储 <ObjectRow /> 组件实例。
  2. 循环并填充数组：使用 for 循环，将多个 <ObjectRow /> 实例推入数组中。
  3. 添加 key 属性：在每次调用 <ObjectRow /> 时添加 key 属性。这是 React 识别每个组件实例的关键。
  4. 渲染数组：在 JSX 中使用 {rows} 渲染数组中的所有组件。

注意事项

  • key 属性：在列表中渲染组件时，必须为每个子元素提供一个唯一的 key 属性。这有助于 React 优化渲染过程。
  • 避免使用索引作为 key：如果可能的话，最好使用唯一标识符作为 key，而不是索引。索引作为 key 可能会导致问题，特别是在列表项重新排序或添加/删除时。

希望这能帮助你实现你的目标！

LV真香12