使用React.cloneElement将道具传递给儿童

Question

你可以这样做

<div>
<MyComponent ...this.props/>
</div>

将道具传递给MyComponent，但如果你想让MyComponent成为一个孩子你必须使用

<div>{React.cloneElement(this.props.children, this.props)}</div>

克隆元素有替代品吗？我正在使用babel，我尽量不以较旧的方式写作。

Answer 1

props对象是只读的，这意味着this.props.children[0].props = {...}之类的东西不起作用。您必须使用React.cloneElement。

https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only

  

React非常灵活，但它有一个严格的规则：

     

所有React组件必须像其道具一样充当纯函数。

如果你有一个组件阅读和操纵它的孩子的道具，孩子可能不再是纯净的。所以你需要克隆一个新的。