如何在 TypeScript 中定义接口以正确传递道具？

Question

我有一个呈现徽标文本的简单组件

interface AppBarLogoProps = {
  logo: string;
};

export const AppBarLogo: FC<AppBarLogoProps> = ({ logo }) => {
  return (
    <>
      <h1>
        {logo}
      </h1>
    </>
  );
};

和比下面更复杂的 AppBarTop 组件，但我的想法是我想将 logo 道具从 AppBarTop 传递给 AppBarLogo。

问题是我必须使用 logo.logo 表示法。 我应该如何定义接口以使用return <AppBarLogo logo={logo} />而不是return <AppBarLogo logo={logo.logo} /> ？

interface AppBarTopProps {
  logo: AppBarLogoProps;
}

export const AppBarTop: FC<AppBarTopProps> = ({ logo }) => {
   return <AppBarLogo logo={logo.logo} />
}

Answer 1

您可以使用 TypeScript 交点& ：

interface AppBarLogoProps {
  logo: string;
};

interface AppBarTopProps {
  foo: string
}

export const AppBarTop: React.FC<AppBarTopProps & AppBarLogoProps> = ({ logo, foo }) => {
  return <AppBarLogo logo={logo} />
}

此外，您可能不应该使用FC ，而只需使用 function：

export const AppBarTop2 = ({ logo, foo }: AppBarTopProps & AppBarLogoProps) => {
  return <AppBarLogo logo={logo} />
}

Answer 2

像这样？

interface AppBarTopProps extends AppBarLogoProps {
    // other properties
}

export const AppBarTop: FC<AppBarTopProps> = (props) => {
   return <AppBarLogo {...props} />
}