React遍历Children数组包裹子元素：是否用cloneElement？key如何设置？

1. 当前渲染方式是否正确？ #

用React.Children.toArray(children)将children转为数组后，通过map给每个子元素包裹SomeWrapper的思路是可行的，能满足需求，但存在HTML语义错误：
当前PrivateComponent返回了div，而ListItems的根元素是ul，最终DOM结构会变成ul > div > SomeWrapper > 子元素，但HTML规范要求ul的直接子元素必须是li，这种结构会破坏语义，还可能影响样式和可访问性。

修正方案是把PrivateComponent里的div换成React Fragment，或直接返回map后的数组（React 16+支持数组作为组件返回值）：

// 用Fragment包裹
export const PrivateComponent = ({ children }) => {
  const _children = React.Children.toArray(children);
  return (
    <>
      {_children.map(child => <SomeWrapper>{child}</SomeWrapper>)}
    </>
  );
}

// 或直接返回数组
export const PrivateComponent = ({ children }) => {
  const _children = React.Children.toArray(children);
  return _children.map(child => <SomeWrapper>{child}</SomeWrapper>);
}

2. 是否应该使用cloneElement？ #

不需要。React.cloneElement的核心作用是克隆现有元素并添加/修改其props（比如给子元素传额外的事件、类名）。而你的需求只是给子元素外层包裹容器，不需要修改子元素本身的属性，所以当前的map包裹方式完全足够，没必要用cloneElement。

如果后续需要给子元素添加props，才需要用到cloneElement，示例如下：

_children.map(child => (
  <SomeWrapper>
    {React.cloneElement(child, { extraProp: 'custom-value' })}
  </SomeWrapper>
))

3. map函数中SomeWrapper的key应如何设置？ #

React列表渲染必须设置唯一key，推荐优先级如下：

• 优先使用子元素自带的key：如果传入的children中每个子元素已经有自己的key（比如用户使用ListItems时传入<li key="item-1">...</li>），直接取child.key作为SomeWrapper的key即可：

  _children.map(child => <SomeWrapper key={child.key}>{child}</SomeWrapper>)
  

• 子元素无key时，使用React.Children.toArray生成的默认key：React.Children.toArray会自动给每个子元素分配一个基于其在children中位置的唯一key，此时child.key已存在，可直接复用。
• 不推荐用index作为key：除非列表完全静态、不会发生排序/增删操作，否则用index会导致React无法正确识别元素变化，引发性能问题或状态错乱。

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