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

Z时代
2024-01-10
分类：问答

我有一个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}
      />
    );
  }
}

一切都很好，但是我想将传递给的子组件（在本例中为

），因为在实际代码中，您可以将多个组件传递给它，而不仅仅是示例中的一个。

请注意，我还需要传递自己的道具。

有没有办法做到这一点？

回答：

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