Reactのライブラリでたまに見る<Component.Content />みたいなやつを調べた。~雰囲気でJSを書いている仲間へ届け~

<Alert variant="danger" onClose={() => setShow(false)} dismissible>
  <Alert.Heading>...</Alert.Heading>
  <p>
    str...
  </p>
</Alert>

export namespace Alert {
  export const Heading = (props) => <>...</>
}

// module.tsx
export const Component = () => <>...</>

Component.Body = () => <>...</>

// main.tsx
import ...

const Main = () => {
  return (
    <Component>
      <Component.Body />
    </Component>
  )
}

export default Main

const hello = (name: string) => `hello, ${name}`
hello.world = () => hello('world')

console.log(hello('john')) // hello, john
console.log(hello.world()) // hello, world

type Hello = {
  (name: string): string;
  world(): string;
};

const hello: Hello = (name) => `hello, ${name}`;
hello.world = () => hello("world");

console.log(hello("john")); // hello, john
console.log(hello.world()); // hello, world