使用变体输入 React Props

Question

我正在研究具有一些变体的 React Ts Header。 Header 组件有两个变体，分别命名为HomeHeader和DefaultHeader这里只有 DefaultHeader 需要一个必需的属性title ，而 HomeHeader 不需要。

现在如何键入 HeaderProps HomeHeaderProps 和 DefaultHeaderProps

当前的实现（不完美）

interface HeaderProps {
  variant?: "DEFAULT" | "HOME";
  classes?: string;
  title?: string;
};

variant VariantHeaderProps {
   classes?: string;
   title?: string
};

并用作

const Header: FC<HeaderProps> = ({ variant = "DEFAULT", classes, title })

const DefaultHeader: FC<VariantHeaderProps> = ({ classes, title })

const HomeHeader: FC<VariantHeaderProps> = ({ classes })

Answer 1

从HeaderProps扩展一个新接口并将title定义覆盖为必需的属性，就像这样。

interface DefaultHeaderProps extends HeaderProps {
  title: string;
};

并用它声明DefaultHeader ：

const DefaultHeader: FC<DefaultHeaderProps> = ({ classes, title })