反应：添加道具到现有的组件

Question

我想弄清楚如何克隆现有的元素与额外的道具。

参考：

this.mainContent = <Hello message="Hello world!" /> 

我试图做类似

React.createElement(this.mainContent, Object.assign({}, 
    this.mainContent.props, { anotherMessage: "nice to meet ya!" })); 

，但它不工作。

我该如何做到这一点？

Answer 1

您需要克隆的元素，并使用React.cloneElement添加额外的道具如：

var clonedElementWithMoreProps = React.cloneElement(
    this.mainContent, 
    { anotherMessage: "nice to meet ya!" } 
); 
// now render the new cloned element? 

Answer 2

React.createElement()它可以是一个字符串或一个阵营类类型作为其第一个参数，这样就不会，如果你的工作”重新尝试克隆一个元素。

当然，there's React.cloneElement() instead，它做了另一个React元素的深层副本，并可以选择提供新的道具。

var foo = React.cloneElement(this.mainContent, {anotherMessage: "nice to meet ya!"}); 

应该工作。