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

IT技术 javascript reactjs
2021-04-29 04:28:22

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

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

然而，这会返回以下错误：

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

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

如何克隆多个元素？

1个回答

childrenprops 是一个不透明的结构体，它可以是undefined一个数组，或者一个单一的 react 元素。您应该使用React.Children实用程序来映射children结构：

const style = this.props.style
React.createElement('div',
    { style },
    React.Children.map(this.props.children, (child => React.cloneElement(child, { style })))
)
其它你可能感兴趣的问题
上一篇动态嵌套 React.js 组件 下一篇如何判断我在 Creality Silent V4.2.3 板上是否有 TMC2208 或 A4988 驱动程序？