React：將道具添加到現有組件

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.cloneElement() ，則可以使用以下代碼段：

function AddExtraProps(Component, extraProps) {
    return <Component.type {...Component.props} {...extraProps} />;
}

Answer 3

React.createElement()將字符串或React類類型作為其第一個參數，因此如果您嘗試克隆元素，則無法使用。

當然， 還有React.cloneElement() ，它可以對另一個React元素進行深度復制，並且可以選擇提供新的道具。

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

應該管用。