使用React.cloneElement将道具传递给孩子

Question

You can do this

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

to pass props to MyComponent, but if you want to make MyComponent as a children you have to use

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

Is there any alternative to cloneElement? I'm using babel I try not to write in older way.

Answer 1

The props object is read only, which means something like this.props.children[0].props = {...} will not work. You must use React.cloneElement .

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

React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

If you have a component reading and manipulating the props of it's child, the child may not be pure anymore. So you need to clone a new one.