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

Question

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

interface AppBarLogoProps = {
  logo: string;
};

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

和比下面更复杂的 AppBarTop 组件，但我的想法是我想将徽标道具从 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

像这样？

interface AppBarTopProps extends AppBarLogoProps {
    // other properties
}

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

Answer 2

您可以使用 TypeScript 交集 &:

interface AppBarLogoProps {
  logo: string;
};

interface AppBarTopProps {
  foo: string
}

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

此外，您可能应该 not use FC 并简单地使用函数：

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

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

How to define interfaces in TypeScript to pass the props correctly?

javascript

interface

typescript

reactjs

react-props