ReactJS: How to export a component that destructures into more components-CodePudding

I'm trying to replicate an example where I don't have the code in which they export a component but also destructure it. Not sure how it's done since if you destructure it, then it's an object, but then how can it also be a component?

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

and then they use it like this...

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

or they can just use the Header component <Header> directly since they destructured it.

My best guess is to export it somehow like this but the Card component won't actually be a component... unless I'm missing something...

index.js

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

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

CodePudding user response：

Figured it out.

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;

CodePudding user response：

The Header and Content and Divider are components that have own export and exported as an object into another file. So you can destructure the Object and use its components. All of Header and Content and Divider components have return that returns JSX.

Header/index.js

const Header = () => {
    return (
        <div> Header </div>
    );
}

export Header;

Content/index.js

const Content = () => {
    return (
        <div> Content </div>
    );
}

export Content;

Divider/index.js

const Divider = () => {
    return (
        <div> Divider </div>
    );
}

export Divider;

In exported file as an Object:

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

export const Header;
export const Content;
export const Divider;

const Card = () => {
    return (<div> Card </div>);
};

export default Card ;