Loop inside React JSX

技术背景

在 React 的 JSX 中，无法直接使用 for 循环，因为 JSX 最终会编译为 JavaScript，而在函数调用的参数位置使用 for 循环会导致语法错误。但我们可以通过一些 JavaScript 技巧来实现循环渲染组件。

实现步骤

1. 使用数组存储元素并渲染

可以先创建一个数组，将需要渲染的组件元素添加到数组中，然后在 JSX 中渲染该数组。

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

2. 使用 map 方法

map 方法是在 JSX 中实现循环的常用方式。如果有一个数组，可以直接使用 map 方法将数组中的每个元素映射为一个组件。

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

3. 使用 Array.from 方法

如果没有现成的数组，只是想重复渲染一定数量的组件，可以使用 Array.from 方法。

<tbody>
    {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

4. 使用立即执行函数表达式（IIFE）

可以在 JSX 中使用 IIFE 来实现循环。

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

核心代码

使用 map 方法的 ES6 语法示例

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

使用 Array.from 方法的示例

<tbody>
    {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

使用 IIFE 的示例

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

最佳实践

• 使用唯一的 key 属性：在循环渲染组件时，为每个组件添加唯一的 key 属性，以帮助 React 识别每个元素，提高渲染效率。
• 将逻辑提取到 render 方法外部：为了保持 render 方法的简洁性和可读性，可以将循环逻辑提取到 render 方法外部。

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

常见问题

1. 缺少 key 属性警告

如果在循环渲染组件时没有为每个组件提供唯一的 key 属性，React 会在开发环境中发出警告。确保为每个组件添加唯一的 key 属性。

2. 使用数组索引作为 key 的问题

虽然可以使用数组索引作为 key，但这在列表元素可能发生变化时会导致一些问题。尽量使用元素的唯一 ID 作为 key。

3. for 循环语法错误

在 JSX 中直接使用 for 循环会导致语法错误，应使用上述提到的方法来实现循环。