如何将子级传递给 React 可重用组件？

Question

我想制作一个可重用的组件，并以特定的方式传递其他组件，就像 UI 库所做的那样。

例如，假设我想构建一个 Card 组件，

一种可能的方法是像 props 一样传递组件：

return (
  <Card
    header={<MyHeader />}
    body={<MyBody />}
  />
)

但我想知道当我们这样称呼它时它是如何完成的：

return (
  <Card>
    <Card.Header> 
      // I can put whatever I want here ...
    </Card.Header>

    <Card.Body>
      <div>
        // The same goes here too ..
      </div>
    </Card.Body>
  </Card>
);

有没有一种简单的方法可以使用功能组件来做到这一点？

Answer 1

其实很简单，你想象不到，只需将Body和Header组件分别在Card组件文件夹和Card组件的index.js中都导入即可.附加到Card 组件，然后附加到export default Card。可能是ant.design 的the form 组件：

Head 组件在其单独的文件中：

import React from "react";

const Head = () => (
    <div>
        // some codes
    </div>
);

export default Head;

Body 组件在其单独的文件中：

import React from "react";

const Body = () => (
    <div>
        // some codes
    </div>
);

export default Body;

现在在创建Card 组件的index.js 文件中：

import React from "react";
import Head from "./Head";
import Body from "./Body";

const Card = () => (
    <div>
        // some codes
    </div>
);

Card.Head = Head;
Card.Body = Body;

export default Card;

现在，当您导入Card 组件时，您可以随心所欲地访问Body 和Head：

import Head from "[pathToCardComponent]/Card";

~~~

<Card>
  <Card.Head>header</Card.Head>
  <Card.Body>body</Card.Body>
</Card>