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

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找到working demo here 。

Answer 3

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

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

}

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

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

Answer 4

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

import o from "react-overrides";

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

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

在overrides prop 处传递InnerComponent props 和组件：

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