我有一个React组件(React v15.5.4),您可以将其他组件传递给:
class CustomForm extends React.Component { ... render() { return ( <div> {this.props.component} </div> ); } }
我有一个使用它的不同组件:
class SomeContainer extends React.Component { ... render() { let someObjectVariable = {someProperty: 'someValue'}; return ( <CustomForm component={<SomeInnerComponent someProp={'someInnerComponentOwnProp'}/>} object={someObjectVariable} /> ); } }
一切都很好,但是我想将 someObjectVariable 属性 传递给 CustomForm中 的子组件(在本例中为 SomeInnerComponent ),因为在实际代码中,您可以将多个组件传递给它,而不仅仅是示例中的一个。
请注意,我还需要传递 SomeInnerComponent 自己的道具。
有没有办法做到这一点?
您可以使用React.cloneElement来实现。
像这样:
class CustomForm extends React.Component { ... render() { return ( <div> {React.cloneElement(this.props.component,{ customProps: this.props.object })} </div> ); } }
工作代码:
class Parent extends React.Component{ render() { return( <Child a={1} comp={<GChild/>} /> ) } } class Child extends React.Component{ constructor(){ super(); this.state = {b: 1}; this.updateB = this.updateB.bind(this); } updateB(){ this.setState(prevState => ({b: prevState.b+1})) } render(){ var Comp = this.props.comp; return ( <div> {React.cloneElement(Comp, {b: this.state.b})} <button onClick={this.updateB}>Click to update b</button> </div> ); } } const GChild = props => <div>{JSON.stringify(props)}</div>; ReactDOM.render( <Parent />, document.getElementById('container') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='container' />