React：将道具添加到现有组件

Question

I'm trying to figure out how to clone an existing element with additional props.

For reference:

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

I attempted to do something like

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

but it's not working.

How would I accomplish this?

Answer 1

You need to clone the element and add the additional props using React.cloneElement eg:

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

Answer 2

If you don't want to use React.cloneElement() , you can use the following snippet:

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

Answer 3

React.createElement() takes either a string or a React class type as its first parameter, so that won't work if you're trying to clone an element.

Of course, there's React.cloneElement() instead , which does a deep copy of another React element and can optionally provide new props.

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

Should work.