将组件传递到另一个组件中

Question

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

给出两个组件Number和<List />，它们当前在另一个组件中被导入到我的主<Box />文件中，例如：

App.js

将export const CallOut = () => { return( <div style={styles.sectionInner}> <List /> <BoxRight/> </div> ) }; 导入到<CallOut />中，我想将这两个组件传递到App.js组件中。

传递这两个参数并将它们放在<CallOut />组件中当前所在的相同位置的正确语法是什么？

我认为应该类似于

CallOut

但是我知道这是不对的。

Answer 1

您可以使用道具的大写名称，并使用它们实例化反应组件，如下所示：

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

List和Box是此组件的属性。您可以像这样实例化它：

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

Answer 2

我不知道我们是否在同一页面上，但是也许您正在寻找children属性？

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

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

和用法：

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

您可以将任何组件作为CallOut的子级进行传递，甚至可以使用children API进行一些过滤

这是常见的用法，当组件提前不知道其子代并且仅用于某种​​装箱/包装时。