Vue：如何根据父组件差异化渲染组件及定制卡片子组件

你好！其实完全没必要为每种卡片变体都创建独立组件，这里有几个更灵活的方案，能完美解决你的需求：

1. 上下文（Context）传递卡片类型 #

这是最优雅的方案之一，让公共子组件能“感知”自己所在的卡片环境，自动调整样式或结构。以React为例：

首先创建一个上下文来传递卡片变体信息：

import { createContext, useContext } from 'react';

// 创建卡片上下文
const CardContext = createContext(null);

// 上下文提供者组件
export const CardProvider = ({ variant, children }) => {
  return (
    <CardContext.Provider value={variant}>
      {children}
    </CardContext.Provider>
  );
};

// 自定义Hook，方便子组件获取变体信息
export const useCardVariant = () => useContext(CardContext);

然后实现通用的Card组件，通过props接收变体类型并提供上下文：

const Card = ({ variant, children }) => {
  return (
    <CardProvider variant={variant}>
      <div className={`card card--${variant}`}>
        {children}
      </div>
    </CardProvider>
  );
};

最后，公共子组件（比如TextBlock）通过Hook获取变体，动态添加类或包装元素：

const TextBlock = ({ children }) => {
  const variant = useCardVariant();
  const textBlockClass = variant 
    ? `text-block text-block--${variant}` 
    : 'text-block';

  // 如果需要包装元素，也可以在这里根据变体渲染
  return (
    <div className={textBlockClass}>
      {children}
    </div>
  );
};

使用时只需要给Card传不同的variant即可：

<Card variant="featured">
  <TextBlock>重磅推荐内容</TextBlock>
  <Avatar />
</Card>

<Card variant="basic">
  <TextBlock>普通内容</TextBlock>
  <Avatar />
</Card>

2. 通过Props传递变体信息，动态包装子组件 #

如果不想用上下文，也可以让Card组件直接处理子元素，给它们添加类或包装元素：

const Card = ({ variant, children }) => {
  // 遍历子元素，给每个有效组件添加变体相关的类
  const wrappedChildren = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      // 克隆子组件，追加变体类名
      return React.cloneElement(child, {
        className: `${child.props.className || ''} ${child.type.name.toLowerCase()}--${variant}`.trim(),
      });
    }
    return child;
  });

  return <div className={`card card--${variant}`}>{wrappedChildren}</div>;
};

这种方式更直接，适合变体逻辑比较简单的场景。

3. 高阶组件（HOC）或组合式Wrapper #

如果你希望更灵活地控制单个子组件的表现，可以用HOC给子组件注入变体属性：

const withCardVariant = (variant) => (Component) => {
  return (props) => {
    const className = `${props.className || ''} ${Component.name.toLowerCase()}--${variant}`.trim();
    return <Component {...props} className={className} />;
  };
};

// 使用时给子组件包装
const FeaturedTextBlock = withCardVariant('featured')(TextBlock);

// 在卡片中使用
<Card variant="featured">
  <FeaturedTextBlock>推荐内容</FeaturedTextBlock>
</Card>

或者创建专用的Wrapper组件，显式包裹需要调整的子组件：

const CardVariantWrapper = ({ variant, children }) => {
  if (!React.isValidElement(children)) return children;
  
  return React.cloneElement(children, {
    className: `${children.props.className || ''} ${children.type.name.toLowerCase()}--${variant}`.trim(),
  });
};

// 使用方式
<Card variant="featured">
  <CardVariantWrapper variant="featured">
    <TextBlock>推荐内容</TextBlock>
  </CardVariantWrapper>
</Card>

什么时候需要创建独立卡片组件？ #

只有当不同卡片变体之间的差异不仅仅是样式，还涉及完全不同的结构、事件逻辑或数据处理时，才需要拆分独立组件。比如“商品卡片”和“用户信息卡片”，除了公共子组件，还有各自独特的功能模块，这时拆分组件会让代码更清晰可维护。

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