Reactjs 将组件传递到另一个组件中进行反应

我有一个包含许多组件的应用程序。我需要的其中一个组件能够根据布局将另外两个组件的不同变体传递到其中。我相信它可以像数据属性一样传入，但我不确定将其他组件推入的确切语法

给定两个组件

和

，它们当前位于导入到我的主

App.js

文件的另一个组件中：

export const CallOut = () => {
  return(
      <div style={styles.sectionInner}>
        <List />
        <BoxRight/>
      </div>
  )
};

export const CallOut=（）=>{
返回(
)
};

在将

导入

App.js

的地方，我想将这两个组件传递到

组件中

将这两个参数传递进来并将它们放置在

CallOut

组件中当前所在的同一位置的正确语法是什么

我认为应该是类似于

---

但我知道这是不对的。

你可以用大写字母来表示道具，并用它们来实例化react组件，如下所示：

export const CallOut = ({List, Box}) => (
  <div style={styles.sectionInner}>
    <List/>
    <Box/>
  </div>
);

<CallOut List={SomeComponent} Box={SomeOtherComponent}/>

---

我不知道我们是否意见一致，但也许你在找房子

因此，您的组件将如下所示：

export const CallOut = ({children}) => (
  <div style={styles.sectionInner}>
    {children}
  </div>
);

export const CallOut=（{children}）=>(
{儿童}
);

使用方法：

  <CallOut >
    <List/>
    <Box/>
  </CallOut>

您可以将任何组件作为

CallOut

子级传递，甚至可以使用

---

当组件事先不知道它们的子组件时，这是一种常见用法，并且它仅用于某种装箱/包装。

这是一种很好的方法。但是，我怎样才能将它们简单地传递到

组件上，使其类似于

您可以将这些道具分配给名称以大写字母开头的变量，然后像其他任何组件一样使用它们。我不太清楚您的意思是什么？我想可能会对我的工作产生一些混淆。布局中有多个

实例，需要将

和

组件的不同变体传递到App.js主文件中的

组件中。因此会有

和类似的变体。使用此代码，您可以将

列表

和

BoxRight

作为属性传递。这可能与DoMiNeLa10在更改为当前版本之前最初发布的实现相同。我正在寻找一种方法，将

列表

和

框

作为值传递到

调用

中，类似于

将有多个

调用

组件，其中包含传递到它们中的列表和框组件的变化。希望这有助于消除混乱。有什么想法吗？好的，我知道了。因此，可能会传递一些函数，这些函数将被调用以在

CallOut

组件中创建列表和框组件。它看起来是这样的：

}box={（）=>}/>

。这就是你想要的吗？