如何使用 React.cloneElement 克隆多个孩子？

【问题标题】：How to clone multiple children with React.cloneElement?如何使用 React.cloneElement 克隆多个孩子？
【发布时间】：2016-10-26 23:21:28
【问题描述】：

我尝试像这样克隆 React 元素，将父 props 传递给它们（在此示例中未分配 props）：

React.createElement('div',
    {
        style: this.props.style
    },
    React.cloneElement(this.props.children, null)
)

然而这会返回以下错误：

未捕获的不变违规：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。

如果只有一个孩子，或者如果我通过了 React.cloneElement(this.props.children[0], null)，则没有错误并呈现所需的元素。

如何克隆多个元素？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

children props 是一个不透明的结构，它可以是undefined，一个数组，或者一个单独的 react 元素。您应该使用React.Children utilities 映射children 结构：

const style = this.props.style
React.createElement('div',
    { style },
    React.Children.map(this.props.children, (child => React.cloneElement(child, { style })))
)

【讨论】：

最小的笔记 - 缺少结尾处的 ))
注意：如果children是单个元素或Fragment，则不会被遍历。
@GreeKatrina 如果它是单个元素（不是片段）当然会被遍历。
@asliwinski 文档说不。 reactjs.org/docs/react-api.html#reactchildrenmap
@GreeKatrina 你一定正在阅读不同的文档，绝对不是你链接到的内容：“注意如果孩子是一个片段，它将被视为一个孩子而不是遍历。”没有遍历单个元素。