ReactJS 如何实现导出可解构为多个子组件的复合组件

JS 中函数本身就是引用类型的对象，支持挂载自定义属性。而 React 函数组件本质就是普通函数，类组件本质是构造函数，因此完全可以在主组件上挂载子组件作为属性，同时保留组件本身的渲染能力。你之前的写法直接把Card定义为普通对象，自然不具备组件的渲染能力，调整为如下写法即可。

// Card.jsx 主组件实现
import { Header } from "./Header"
import { Content } from "./Content"
import { Divider } from "./Divider"

// 首先定义Card主组件
const Card = (props) => {
  // 你的Card主组件逻辑，比如包裹容器样式、通用逻辑等
  return <div className="card-wrapper" {...props} />
}

// 给主组件挂载子组件属性
Card.Header = Header
Card.Content = Content
Card.Divider = Divider

export { Card }

导出后就完全支持你提到的两种使用方式：

1. 直接挂载属性使用

const MyComponent = () => {
  return (
    <Card>
      <Card.Header>头部</Card.Header>
      <Card.Content>内容</Card.Content>
    </Card>
  )
}

2. 解构后使用

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

const MyComponent = () => {
  return (
    <Card>
      <Header>头部</Header>
      <Content>内容</Content>
    </Card>
  )
}

• 如果是类组件，既可以直接给类挂载静态属性，也可以在类内部用static关键字声明：

class Card extends React.Component {
  static Header = Header;
  static Content = Content;
  // 类组件逻辑
}

• 如果是 TypeScript 环境，需要额外给主组件声明附加属性的类型，避免类型报错：

import type { FC } from 'react'

interface CardProps {
  // 主组件props定义
}
// 声明Card组件的类型，包含主组件本身的类型和子组件属性
type CardComp = FC<CardProps> & {
  Header: typeof Header,
  Content: typeof Content,
  Divider: typeof Divider
}

const Card = ((props: CardProps) => {
  return <div className="card-wrapper" {...props} />
}) as CardComp

内容的提问来源于stack exchange，提问作者wongx