Question

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

有办法吗？

Answer 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' />

Answer 2

您可以像对SomeInnerComponent那样做。

只需传递命名道具。

在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>
    );
  }

编辑：

请找到working demo here。

Answer 3

你有几个选择来实现你的要求。

class SomeContainer extends React.Component {
  ...
  render() {
   let someObjectVariable = {someProperty: 'someValue'};
    return (
      <CustomForm 
       component={<SomeInnerComponent propFromParent={someObjectVariable}/>}
       object={someObjectVariable}
      />
    );
  }

}

或者你可以克隆组件道具并应用新的道具，如Mayank所说。在你的情况下

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
        {React.cloneElement(this.props.component,
           {propFromParent:this.props.someObjectVariable})}
      </div>
  );
 }
}

Answer 4

您可以使用react-overrides。创建CustomForm：

import o from "react-overrides";

const InnerComponent = () => null; // default

class CustomForm extends React.Component {
  ...
  render() {
    return (
      <div>
          <InnerComponent {...o} />
      </div>
    );
  }
}

在InnerComponent处传递道具和overrides的组成部分：

class SomeContainer extends React.Component {
  ...
  render() {
    let someObjectVariable = {someProperty: 'someValue'};
    return (
      <CustomForm 
         object={someObjectVariable}
         overrides={{
             InnerComponent: {
                 component: SomeInnerComponent,
                 props: {
                     someProp: 'someInnerComponentOwnProp'
                 }
             }
         }}
      />
    );
  }
}

Answer 5

<TextField place={"India"}> </TextField>

以及您的组件TextField

class TextField extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <div>
                <input />
                <button> {this.props.place} </button>
            </div>
        )
      }
}

React - 如何将props传递给作为prop

5 个答案: