React Onclick - 没有重载与此调用匹配

Question

TS 新手，不得不说错误不是很友好。

我试图将钩子函数作为我添加到界面中的道具传递给组件，但出现了我无法理解的错误。

没有重载与此调用匹配。重载 1 of 2, '(props: Pick, HTMLButtonElement>, "form" | ... 264 更多 ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 更多... | "setActivity"> & Partial<...>, "form" | ... 267 更多 ... | "setActivity"> & { ...; } & { ...; }): ReactElement <...>'，给出了以下错误。类型“{children: string |”中缺少属性“setActivity” （字符串&{}）| (字符串 & ReactElement ReactElement 组件)>) | （新（道具：任意）=> 组件<...>）>） | (字符串&ReactNodeArray) | （字符串和 ReactPortal）；活动：布尔值；onClick: () => 函数; }' 但在类型 'Pick, HTMLButtonElement>, "form" | 中是必需的 ... 264 更多... | “onTransitionEndCapture”> & { ...; } & IButtonProps，“表单”| ... 267 更多... | "setActivity"> & 部分<...>, "表单" | ... 26

我已经尝试过一些我读过的方法，例如将该方法放入匿名函数中并将我的接口 onclick 设置为(e: React.MouseEvent) => void，但似乎没有一个起作用。从我的代码来看，我觉得我做的一切都是正确的，但显然不是。

这是我的组件：

interface IButtonProps {
  children: string,
  active: Boolean,
  setActivity: Function,
  onClick: (e: React.MouseEvent) => void,
}


// Styling
const Button = styled.button<IButtonProps>`
  ${({ theme }) => `
    border: ${theme.TabsBorder};
    font-size: ${theme.TabsFontsize};
    background-color: transparent;
    flex: 1;
    padding: 1rem;
    outline: 0;

    &:hover {
      background-color: ${theme.TabActiveBackground};
      color: ${theme.TabActiveColour};
    }

    ${({ active }) => active && `
      background-color: ${theme.TabActiveBackground}
      color: ${theme.TabActiveColour};
    `}
  `}
`;

const Item: FC<IButtonProps> = ({
  children,
  active,
  setActivity,
}) => (
  <Button
    active={active}
    onClick={() => setActivity}
  >
    {children}
  </Button>
);

SetActivity 是我传递到组件中进行引用的钩子。

Answer 1

该onClick方法返回了一个setActivity: Function不应该返回的函数。应该是它的执行

onClick={() => setActivity()}

或者如果该函数已经是自绑定的，您可以立即setActivity将其传递给道具onClick

onClick={setActivity}

也IButtonProps有setActivity作为财产。这意味着您必须将其传递给Button组件

const Item = (props: any) => {
    const { children, active, setActivity, } = props;
    return (
        <Button
             active={active}
             setActivity={() => {}}
             onClick={() => setActivity()}
        >
             {children}
        </Button>
     );
};