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

小编典典

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