Question

我已经定义了这样的“徽标”组件：

const Logo = ({ className }: { className: string }) => (
  <Link to="/" className={className}>
    <img src={logo} alt="logo" />
  </Link>
);

哪些可以通过传递className来设置样式。

但是当我将它与像这样的打字稿一起使用时：

const StyledLogo = styled(Logo)`
  margin-left: 4.5rem;
`;

...在渲染中的某处：

<StyledLogo />

然后我遇到了这样的错误：

错误：（33，6）TS2741：类型'{}'中缺少属性'className'，但是在“选择＆ Partial>，“ className“>”。

如何让打字稿知道我所有样式化的组件都将通过此className属性传递并且始终存在？

Answer 1

应该可以通过执行以下操作来标记className as optional的Logo参数来解决此问题：

/* Add ? after className */
const Logo = ({ className }: { className?: string }) => (
  <Link to="/" className={className}>
    <img src={logo} alt="logo" />
  </Link>
);

const StyledLogo = styled(Logo)`
  margin-left: 4.5rem;
`;

/* No ts error reported now */
<StyledLogo />

希望有帮助！

更新

或者，为避免上述可选的className方法，您可以采用这种方法：

/* Define type to minimise verbosity */
type LogoProps = { className: string };

/* Define strongly typed Logo function with defined type */
const Logo = (props: LogoProps) => (
  <Link to="/" className={props.className}>
    <img src={"logo"} alt="logo" />
  </Link>
);

/* TS explicitly aware of prop set being passed to Logo via type */
export const StyledLogo = styled((props: LogoProps) => <Logo {...props} />)`
  margin-left: 4.5rem;
`;

 /* Usage */
 <StyledLogo />

此方法可确保TS知道传递给Logo组件的实际道具集。

样式组件缺少className

1 个答案:

更新