reactjs - React Onclick - 没有重载匹配这个调用

Question

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

我试图将钩子(Hook)函数作为 Prop 传递给组件，我已将其添加到我的界面中，但我收到了这个我无法理解的错误。

No overload matches this call. Overload 1 of 2, '(props: Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 more ... | "setActivity"> & Partial<...>, "form" | ... 267 more ... | "setActivity"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Property 'setActivity' is missing in type '{ children: string | (string & {}) | (string & ReactElement ReactElement Component)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal); active: Boolean; onClick: () => Function; }' but required in type 'Pick, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 more ... | "setActivity"> & Partial<...>, "form" | ... 26

我已经尝试了一些我读过的东西，比如将方法放在匿名函数中并将我的接口(interface) 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 是我传递到要引用的组件的 Hook 。

Answer 1

onClick 方法正在返回一个不应返回的 Function setActivity: Function。应该是执行吧

onClick={() => setActivity()}

或者如果 setActivity 函数已经自绑定(bind)，您可以立即将其传递给 onClick 属性

onClick={setActivity}

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

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