如何拆分ResourceCard组件以实现关注点分离？

你当前把整个卡片做成单一组件，参数过多导致臃肿，想要拆分实现关注点分离，下面是这类组件拆分的常用最佳实践：

按功能模块拆分组件 #

把卡片拆分成职责单一的子组件，每个组件只负责一个区域的逻辑和渲染：

1. 卡片头部（ResourceCardHeader） #

负责展示资源类型、图标、时长描述，接收iconUrl、type、typeDescription参数，专注处理类型标识相关的渲染逻辑。

2. 卡片内容区（ResourceCardContent） #

负责展示标题和正文内容，接收bodyTitle、body参数，只处理文本内容的排版和渲染。

3. 卡片CTA区（ResourceCardCTA） #

负责展示跳转按钮，接收ctaText、ctaUrl参数，专注处理按钮的交互和跳转逻辑。

4. 主容器（ResourceCard） #

作为顶层容器，负责卡片的整体布局、背景样式，以及接收imageUrl这类全局样式相关的参数，同时组合各个子组件。

拆分后的组件调用示例 #

<ResourceCard imageUrl="https://imageUrl.com">
  <ResourceCardHeader 
    iconUrl="https://iconimageUrl.com"
    type="WEBINAR"
    typeDescription="60 min video"
  />
  <ResourceCardContent
    bodyTitle="Holiday Email: What to Know Before You Send"
    body="Learn from our team of email..."
  />
  <ResourceCardCTA
    ctaText="Watch the webinar"
    ctaUrl="https://exampleLink.com"
  />
</ResourceCard>

拆分的核心优势 #

• 关注点分离：每个子组件只处理自己的功能，比如修改CTA按钮样式时，不用动头部或内容区的代码。
• 复用性提升：子组件可以单独在其他场景复用，比如ResourceCardCTA可以直接用到其他需要跳转按钮的地方。
• 维护成本降低：定位问题或修改功能时，只需找到对应的子组件即可，不用在大组件里翻找。
• 扩展性更强：后续要给卡片加新功能（比如头部加标签），只需修改ResourceCardHeader，不会影响其他区域。

额外优化建议 #

如果需要更灵活的自定义能力，可以在主容器组件中预留插槽（比如React的children、Vue的slot），允许用户替换某个区域的默认子组件，比如自定义CTA区域的样式或逻辑。

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