如何在React中将参数传递给动态组件？

Question

假设我们有一个主页，其中包含一个组件A，并将一个组件B作为prop传递给A。 现在，在A内部，如何将参数传递给已发送的B？

主页

return(
    <A myChild={<B>} />
)

组件B

return(
    <div>Welcome from B !</div>
)

组件A

//I get B successfully !

<div>{this.props.myChild}</div>

但是我如何在此处将参数传递给this.props.myChild？ 像const MyB={this.props.myChild};和<MyB whatEver={'abc'} />之类的东西，因此B变为：

return(
    <div>Welcome from B ! {this.props.whatEver}</div>
)

谢谢。

Answer 1

您应该将任何组件作为子组件传递，并在父组件中渲染子组件，或者可以使用Render Props技术 主页

<A>
  <B whatEver={'abc'} />
</A>

组件A

<div>{this.props.children}</div>

组件B

<div>Welcome from B ! {this.props.whatEver}</div>

Answer 2

您可以仅将类/函数（B）作为道具传递，而不是该类/函数的实例（<B>）。然后允许A组件调用并渲染B，然后可以照常传递道具。

例如，您将拥有：

主页

return(
    <A MyChild={ B } />
)

组件A

const { MyChild } = this.props;
const whatEver = "Hello";
return (
    <MyChild whatEver={ whatEver }/>
)

组件B

return(
    <div>Welcome from B ! {this.props.whatEver}</div>
)

Answer 3

除了其他答案外，以下代码段仅在MyChild道具大写的情况下有效（因此，您问题中的myChild无效）。

const { MyChild } = this.props;
const whatEver = "Hello";
return (
    <MyChild whatEver={ whatEver }/>
)

解析JSX时，此确切的代码<MyChild whatEver={ whatEver }/>被重写为React.createElement函数。因此，如果您想使道具保持小写（例如component），则可以自己致电createElement：

const { component } = this.props;
const props = {whatEver: "Hello"};
return React.createElement(component, props);

或在JSX中：

// ...
return (
  <div>
    {React.createElement(component, props)}
  </div>
);