小编典典

React-如何将prop传递给作为prop传递的组件

reactjs

我有一个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 自己的道具。

有没有办法做到这一点?


阅读 537

收藏
2020-07-22

共1个答案

小编典典

您可以使用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' />
2020-07-22