Reactjs 反应类型脚本联合类型

我创建了一个卡片组件，它有两个变体：包装器和仪表板。每种变体都有不同的道具

export type DashboardProps = {
  variant: CardVariant.Dashboard,
  primaryText: string,
  secondaryText: string,
  icon: OverridableComponent<SvgIconTypeMap<{}, "svg">>,
  iconColor: string,
}

export type WrapperProps = {
  variant: CardVariant.Wrapper,
  children: any,
}

export type Props = DashboardProps | WrapperProps;

唯一看起来不错的键是variant，我想这是因为这是两种类型中唯一的常用键

Card.tsx

export const Card = ({
  variant,
  primaryText,
  secondaryText,
  icon,
  iconColor,
  children,
}: Props) => {
  switch (variant) {
    case CardVariant.Wrapper:
      return <CardWrapper>{children}</CardWrapper>;
    case CardVariant.Dashboard:
      return (
        <CardDashboard
          primaryText={primaryText}
          secondaryText={secondaryText}
          icon={icon}
          iconColor={iconColor}
        />
      );

    default:
      return null;
  }
};

导出常量卡=({
变体，
primaryText，
第二文本，
偶像
iconColor，
儿童
}：道具）=>{
开关（变型）{
case CardVariant.包装器：
返回{children}；
case CardVariant.仪表板：
返回(
);
违约：
返回null；
}
};

---

做这件事最好的方法是什么？

你已经有了一个有区别的道具联合类型。那么这个呢

export const Card = (props: Props) => {
  switch (props.variant) {
    case CardVariant.Wrapper:
      return <CardWrapper>{props.children}</CardWrapper>;
    case CardVariant.Dashboard:
      return (
        <CardDashboard
          primaryText={props.primaryText}
          secondaryText={props.secondaryText}
          icon={props.icon}
          iconColor={props.iconColor}
        />
      );

    default:
      return null;
  }
};

export const Card=（道具：道具）=>{
开关（道具变型）{
case CardVariant.包装器：
返回{props.children}；
case CardVariant.仪表板：
返回(
);
违约：
返回null；
}
};

使用某种方法。这就解决了它！非常感谢。

export const Card = (props: Props) => {
  switch (props.variant) {
    case CardVariant.Wrapper:
      return <CardWrapper>{props.children}</CardWrapper>;
    case CardVariant.Dashboard:
      return (
        <CardDashboard
          primaryText={props.primaryText}
          secondaryText={props.secondaryText}
          icon={props.icon}
          iconColor={props.iconColor}
        />
      );

    default:
      return null;
  }
};