如何迭代渲染React组件？Grid/Cell组件渲染无显示问题求助

问题原因 #

你在Grid组件的map回调里犯了两个关键错误：

1. 箭头函数用大括号包裹时，没有显式返回组件，默认返回undefined，导致页面无内容渲染。
2. 列表渲染未添加React要求的key属性，虽控制台无报错，但这是规范要求，也会影响后续组件更新逻辑。

另外，你已经创建了包含<Cell/>实例的cells数组，没必要在map里重新创建<Cell/>，直接复用数组元素即可。

修正后的Grid代码 #

写法一：补全return并添加key

// 创建Cell组件列表时提前加好key
let cells = [
    <Cell key="cell-1" />,
    <Cell key="cell-2" />,
];

// 在return中渲染
<div>
    {
        cells.map((cell) => {
            return cell; // 显式返回cell元素
        })
    }
</div>

写法二：简化箭头函数（自动返回）

let cells = [
    <Cell key="cell-1" />,
    <Cell key="cell-2" />,
];

<div>
    {cells.map(cell => cell)}
</div>

写法三：直接渲染数组（最简洁）

既然已经是合法的React元素数组，完全可以跳过map，直接渲染：

let cells = [
    <Cell key="cell-1" />,
    <Cell key="cell-2" />,
];

<div>
    {cells}
</div>

关于key的说明 #

key是React列表渲染的必填项，需要是每个元素的唯一标识（比如后端数据的ID），React通过它追踪元素变化，避免不必要的DOM重渲染，保证性能和组件状态正确性。

内容的提问来源于stack exchange，提问作者User