Tengo un componente React (React v15.5.4) al que puede pasar otros componentes:
class CustomForm extends React.Component { ... render() { return ( <div> {this.props.component} </div> ); } }Y tengo un componente diferente que lo usa:
class SomeContainer extends React.Component { ... render() { let someObjectVariable = {someProperty: 'someValue'}; return ( <CustomForm component={<SomeInnerComponent someProp={'someInnerComponentOwnProp'}/>} object={someObjectVariable} /> ); } }Todo funciona bien, pero quiero pasar someObjectVariable prop al componente secundario dentro de CustomForm (en este caso será SomeInnerComponent ), ya que en el código real puede pasarle varios componentes en lugar de solo uno como en el ejemplo.
Eso sí, también necesito pasar SomeInnerComponent sus propios accesorios.
¿Hay una manera de hacer eso?
Puede lograrlo usando React.cloneElement .
Me gusta esto:
class CustomForm extends React.Component { ... render() { return ( <div> {React.cloneElement(this.props.component,{ customProps: this.props.object })} </div> ); } }Código de trabajo:
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' />Puede hacer lo mismo que hizo con SomeInnerComponent .
Simplemente pase accesorios con nombre.
Dentro de CustomForm ,
render() { const MyComponent = this.props.component; //stored it in some variable return ( <div> <MyComponent customProps = {this.props.object} /> //access object here and passed it or passed individual props </div> ); }EDITAR :
Encuentre la working demo here .
Tienes un par de opciones para lograr lo que pides.
class SomeContainer extends React.Component { ... render() { let someObjectVariable = {someProperty: 'someValue'}; return ( <CustomForm component={<SomeInnerComponent propFromParent={someObjectVariable}/>} object={someObjectVariable} /> ); }}
O puede clonar el accesorio del componente y aplicar los nuevos accesorios como dijo Mayank. En tu caso
class CustomForm extends React.Component { ... render() { return ( <div> {React.cloneElement(this.props.component, {propFromParent:this.props.someObjectVariable})} </div> ); } }