Typescript React/Nextjs styled-components - 将函数作为道具传递给组件会在缺少类型时引发错误

Question

我是打字稿的新手，在将函数“toggle”作为道具传递给样式组件“MobileIcon”时遇到打字稿错误。 我已经在界面 IProps 中为“toggle”设置了函数类型并将其添加到样式组件中。

布局.tsx：

import { FunctionComponent as FC, ReactNode, useState } from "react";
import Toolbar from "src/components/Toolbar";

interface IProps {
  main: ReactNode;
}

const Layout: FC<IProps> = ({ main }) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const toggle = () => {
    setIsOpen(!isOpen);
    console.log("toggle ok");
  };

  return (
    <div>
      <nav>
        <Toolbar isOpen={isOpen} toggle={toggle} />
      </nav>
      <main>{main}</main>
    </div>
  );
};

export default Layout;

工具栏.tsx：

import { FunctionComponent as FC } from "react";
import styled from "styled-components";
import Link from "next/link";

// Components
import Brand from "./Brand";

interface IProps {
  isOpen: boolean;
  toggle: () => void;
}

const Toolbar: FC<IProps> = ({ isOpen, toggle }) => {
  return (
    <Container>
      <Link href="/">
        <a>
          <Brand />
        </a>
      </Link>
      <MobileIcon isOpen={isOpen} onClick={toggle}>...</MobileIcon>
    </Container>
  );
};

export default Toolbar;

样式组件：

const MobileIcon = styled.div<IProps>`
...
`

错误：

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & IProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property 'toggle' is missing in type '{ children: Element[]; isOpen: boolean; onClick: () => void; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & IProps, never> & Partial<...>, "theme">'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, IProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, IProps, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.
    Property 'toggle' is missing in type '{ children: Element[]; isOpen: boolean; onClick: () => void; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & IProps, never> & Partial<...>, "theme">'.

任何帮助都会很棒。

Answer 1

在你的 JSX 上，你使用你的 MobileIcon：

 <MobileIcon isOpen={isOpen} onClick={toggle}>...</MobileIcon>

所以这里MobileIcon的props是isOpen和onClick。 你没有切换道具。

您的 MobileIcon 道具界面是：

interface MobileIconProps = {
   isOpen: boolean;
   onClick: () => void;
}

并且可以用作：

const MobileIcon = styled.div<MobileIconProps>

Answer 2

您的IProps指定了一个toggle道具。 因此，您的MobileIcon组件也需要该道具，但您没有在Toolbar组件中指定它。

也许你不希望你的MobileIcon使用由指定的道具IProps ，只是{}无道具）来代替。 毕竟， div没有isOpen或toggle 。