Javascript React - 如何将道具传递给作为道具传递的组件

React - How to pass props to a component passed as prop

提问by Daniel Calderon Mori

I have a React component (React v15.5.4) that you can pass other components to:

我有一个 React 组件（React v15.5.4），您可以将其他组件传递给：

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

And I have a different component that uses it:

我有一个不同的组件使用它：

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

Everything renders fine, but I want to pass someObjectVariableprop to the child component inside CustomForm(in this case that'll be SomeInnerComponent), since in the actual code you can pass several components to it instead of just one like the example.

一切都呈现得很好，但我想将someObjectVariable属性传递给CustomForm内的子组件（在这种情况下，它将是SomeInnerComponent），因为在实际代码中，您可以将多个组件传递给它，而不是像示例那样只传递一个组件。

Mind you, I also need to pass SomeInnerComponentits own props.

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

Is there a way to do that?

有没有办法做到这一点？

采纳答案by Mayank Shukla

You can achieve that by using React.cloneElement.

你可以通过使用React.cloneElement来实现。

Like this:

像这样：

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

Working Code:

工作代码：

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

回答by Afzal

You have a couple of options to achieve what your asking.

您有多种选择来实现您的要求。

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

}

}

Or you can clone the component prop and apply the new props as Mayank said. In your case

或者你可以像 Mayank 所说的那样克隆组件 prop 并应用新的 props。在你的情况下

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

回答by Ilya Lesik

You can use react-overridesfor this. Create CustomForm:

您可以为此使用反应覆盖。创建自定义表单：

import o from "react-overrides";

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

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

Pass props and component of InnerComponentat overridesprop:

传递道具和InnerComponentat overridesprop 的组件：

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

回答by x-rw

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

and in your component TextField

并在您的组件 TextField 中

class TextField extends Component {

    constructor(props){
        super(props);
    }

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

回答by RIYAJ KHAN

You can do in the same as you did for SomeInnerComponent.

您可以像对SomeInnerComponent.

Just pass named props.

只需传递命名道具。

Inside CustomForm,

里面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>
    );
  }

EDIT :

编辑 ：

Please find the working demo here.

请找到working demo here.