ReactJS：如何导出分解成更多组件的组件

Question

我正在尝试复制一个示例，其中我没有导出组件但也对其进行解构的代码。不知道它是如何完成的，因为如果你解构它，那么它就是一个对象，但它怎么可能也是一个组件呢？

import { Card } from 'example-npm-project';
const { Header, Content, Divider } = Card;

然后他们就这样使用它......

const MyComponent = () => {
  return (
    <Card>
      <Card.Header>
      </Card.Header>
    </Card>
  )
}

或者他们可以直接使用 Header 组件<Header>，因为他们已经解构了它。

我最好的猜测是像这样以某种方式导出它，但 Card 组件实际上并不是一个组件......除非我遗漏了什么......

index.js

import { Header } from "./Header"
import { Content } from "./Content"
import { Divider } from "./Divider"

export const Card = { Header, Content, Divider }; // ???

Answer 1

想通了。

import { Card } from "./Card"
import { Header } from "./Header"
import { Content } from "./Content"
import { Divider } from "./Divider"

export { Card };
Card.Header = Header;
Card.Content = Content;
Card.Divider = Divider;