React.js问题：父组件展开map结果时this.props.children变为对象

嘿，这个问题我之前也碰到过，其实是React处理props.children的一个默认特性导致的：当组件只有单个子元素时，React会直接把children设为这个元素的对象；只有当有多个子元素的时候，才会以数组的形式返回。

看你的代码，.map()方法如果返回的数组长度是1的话，展开后就会变成单个子节点传入DropdownMenu，这时候this.props.children就会是对象而不是数组；如果数组里有2个及以上元素，才会是数组——这应该就是你看到“有时候children变成对象”的原因。

几种靠谱的解决办法 #

1. 用React官方的工具方法（最推荐） #

React专门提供了React.Children.toArray()来统一处理这种情况，它会自动把单个子元素转换成数组，还能帮你处理子元素的key，避免一些潜在问题：

// DropdownMenu.js
render() {
  const childrenList = React.Children.toArray(this.props.children);
  console.log(childrenList); // 不管子元素数量多少，这里始终是数组
  // 接下来你就可以放心用forEach、map这些数组方法啦
}

2. 直接传入数组（不推荐但可行） #

你也可以在父组件里不展开.map()的结果，直接把数组传进去：

render() {
  return (
    <DropdownMenu label={'Some label'} onChange={() => {}} >
      {items} {/* 直接传整个数组，不用展开 */}
    </DropdownMenu>
  );
}

不过这种方式我不太推荐，因为如果数组为空的话可能会出现奇怪的渲染问题，而且官方的工具方法明显更靠谱。

3. 手动判断类型转换 #

如果你不想用官方工具，也可以自己写个小判断，把单个对象转成数组：

// DropdownMenu.js
render() {
  const children = Array.isArray(this.props.children) 
    ? this.props.children 
    : [this.props.children];
  console.log(children);
}

再唠唠你的代码情况 #

你现在的示例代码里.map()返回了两个元素，展开后传入的话，理论上this.props.children应该是数组，但肯定是在某些场景下（比如列表只有1条数据），.map()返回的数组长度为1，这时候就触发了React的这个默认行为，导致children变成对象啦。

总之，用React.Children.toArray()是最稳妥的方案，各种边界情况它都能帮你处理好。

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