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 添加其他道具，例如：

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

Answer 2

如果不想使用React.cloneElement()，可以使用如下sn -p：

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

Answer 3

React.createElement() 将字符串或 React 类类型作为其第一个参数，因此如果您尝试克隆元素，这将不起作用。

当然，there's React.cloneElement() instead，它对另一个 React 元素进行深度复制，并且可以选择提供新的 props。

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

应该可以。