将TS传递类型反应到样式化组件 [英] React TS - Passing types to Styled Components

问题描述

因此，我当前有一个导航组件，它将在组件被单击时切换其背景颜色。我的open道具显示以下错误：

var open: any
Binding element 'open' implicitly has an 'any' type.

即使我将接口传递给样式组件：

const StyledBurgerIcon = styled.div<INavigation>`
  align-self: flex-end;
  width: 2em;
  height: 2em;
  background: ${({ open }) => (open ? "red" : "green")};
`;

接口已通过：

interface INavigation {
  open: boolean;
  setOpen: (open: boolean) => void;
}

我在CodeSandBox上没有收到此错误，但它在VSCode中显示了此错误：

const BurgerIcon: StyledComponent<"div", any, INavigation, never>
No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "className" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & INavigation, "key" | ... 255 more ... | "setOpen"> & Partial<...>, "key" | ... 255 more ... | "setOpen"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property 'setOpen' is missing in type '{ open: boolean; onClick: () => void; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "className" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & INavigation, "key" | ... 255 more ... | "setOpen"> & Partial<...>, "key" | ... 255 more ... | "setOpen">'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, INavigation, never>): ReactElement<StyledComponentPropsWithAs<"div", any, INavigation, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Property 'setOpen' is missing in type '{ open: boolean; onClick: () => void; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "className" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & INavigation, "key" | ... 255 more ... | "setOpen"> & Partial<...>, "key" | ... 255 more ... | "setOpen">'.ts(2769)
Navigation.tsx(6, 3): 'setOpen' is declared here.
Navigation.tsx(6, 3): 'setOpen' is declared here.

---

导航组件的完整代码：

import * as React from "react";
import styled from "styled-components";

interface INavigation {
  open: boolean;
  setOpen: (open: boolean) => void;
}

const Navigation: React.FC<INavigation> = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <StyledNav>
      <StyledBurgerIcon open={open} onClick={() => setOpen(!open)} />
    </StyledNav>
  );
};

export default Navigation;

const StyledNav = styled.nav`
  display: flex;
  flex-direction: column;
`;
const StyledBurgerIcon = styled.div<INavigation>`
  align-self: flex-end;
  width: 2em;
  height: 2em;
  background: ${({ open }: {open: boolean}) => (open ? "red" : "green")};
`;

这里有一个CodeSandBox

提前感谢您的帮助！

推荐答案

您正在为Navigation组件和StyledBurgerIcon使用相同的接口。

interface INavigation {
  open: boolean;
  setOpen: (open: boolean) => void;
}

此接口声明的必需属性setOpen在StyledBurgerIcon

中不是必需的

您应该为仅包含open属性的StylesBurgerIcon创建一个单独的接口：

interface IBurgerIconProps {
  open: boolean;
}

然后您的样式化组件就可以使用这个新接口

const StyledBurgerIcon = styled.div<IBurgerIconProps>`
  align-self: flex-end;
  width: 2em;
  height: 2em;
  background: ${({ open }: {open: boolean}) => (open ? "green" : "red")};
`;

这篇关于将TS传递类型反应到样式化组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！