React如何为数组存储的父div元素嵌套子元素并配置唯一key属性？

• 之前用<item key={i}>的操作完全混淆了React元素和组件的概念：数组中存储的item是已经实例化完成的div类型React元素对象，不是可被JSX解析的组件标签，直接写<item>语法会被解析为原生未知HTML标签，无法拿到预先存储的div元素内容。
• React元素是不可变对象，已创建完成的元素无法在渲染阶段直接修改属性、插入子元素，所有结构调整需要在元素创建时完成，或通过官方API克隆生成新元素实现。

结合现有代码逻辑，提供两种适配不同场景的可直接复用的写法：

写法1：数组构建阶段完成全结构定义 #

在循环生成div元素时，直接把子元素、key配置写入标签，不需要在渲染阶段二次处理：

const group = []
for (let i = 0; i < 4; i++) {
  group.push(
    <div 
      className="parent"
      key={i}
    >
      <div className="child"></div>
    </div>
  )
}

return (
  <>
    {group.map(item => item)}
  </>
)

写法2：渲染阶段通过官方API补充属性与子元素 #

如果业务逻辑强制要求先存入空的parent div，需要在渲染阶段统一做结构调整，可使用React内置的cloneElement方法，基于已有元素生成带新属性、新子元素的克隆实例，完全匹配现有代码的前置逻辑：

import { cloneElement } from 'react'

const group = []
for (let i = 0; i < 4; i++) {
  group.push(<div className="parent"></div>)
}

return (
  <>
    {group.map((item, i) => 
      cloneElement(
        item, 
        // 第二个参数为需要补充的属性，这里写入唯一key
        { key: `parent-${i}` },
        // 第三个参数为需要嵌套的子元素
        <div className="child"></div>
      )
    )}
  </>
)

注意：当列表存在动态新增、删除、顺序调整的场景时，不建议直接使用循环索引作为key，应替换为业务侧生成的稳定唯一标识，避免React渲染diff计算出现异常。

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