如何实现类似React-Bootstrap Card的子组件作为父组件属性的语法

实现思路 #

这种组件写法是React生态常用的复合组件模式，核心逻辑是把关联的子组件作为父组件的静态属性挂载，无需单独导出子组件，使用时直接通过父组件访问即可，具体实现步骤如下：

• 先分别实现Card对应的各个子组件（Body、Title、Subtitle、Text、Link等），每个子组件仅需处理自身的默认样式、透传props和children渲染逻辑
• 将所有子组件挂载到Card组件的静态属性上，最终仅导出Card组件即可

示例代码 #

// 实现各子组件，可根据自身需求替换样式实现（比如用Tailwind、CSS Modules、内联样式都可以）
const CardBody = ({ className = '', children, ...rest }) => {
  return <div className={`card-body ${className}`} {...rest}>{children}</div>
}

const CardTitle = ({ className = '', children, ...rest }) => {
  return <h5 className={`card-title ${className}`} {...rest}>{children}</h5>
}

const CardSubtitle = ({ className = '', children, ...rest }) => {
  return <h6 className={`card-subtitle ${className}`} {...rest}>{children}</h6>
}

const CardText = ({ className = '', children, ...rest }) => {
  return <p className={`card-text ${className}`} {...rest}>{children}</p>
}

const CardLink = ({ className = '', children, ...rest }) => {
  return <a className={`card-link ${className}`} {...rest}>{children}</a>
}

// 实现Card根组件
const Card = ({ className = '', children, ...rest }) => {
  return <div className={`card ${className}`} {...rest}>{children}</div>
}

// 把子组件挂载为Card的静态属性
Card.Body = CardBody
Card.Title = CardTitle
Card.Subtitle = CardSubtitle
Card.Text = CardText
Card.Link = CardLink

export default Card

完成上述实现后，你就可以直接用和React-Bootstrap完全一致的语法调用组件，不需要额外导入各个子组件，仅导入Card即可。如果需要实现父子组件的状态共享（比如全局尺寸配置、选中状态同步等复杂逻辑），可以在Card组件内结合React Context传递共享状态，子组件内部消费对应Context即可。

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