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

【问题标题】：React Onclick - No overload matches this callReact Onclick - 没有重载匹配这个调用
【发布时间】：2020-06-19 23:44:25
【问题描述】：

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

我正在尝试将钩子函数作为我添加到界面中的道具传递给组件，但我收到了这个我无法理解的错误。

没有重载匹配这个调用。重载 1 of 2, '(props: Pick, HTMLButtonElement>, "form" | ... 264 更多 ... | "onTransitionEndCapture"> & { ...; } & IButtonProps, "form" | ... 267 更多... | "setActivity"> & Partial<...>, "form" | ... 267 更多 ... | "setActivity"> & { ...; } & { ...; }): ReactElement <...>'，给出以下错误。 '{ children: string | 类型中缺少属性 'setActivity' (字符串 & {}) | (字符串 & ReactElement ReactElement 组件)>) | (new (props: any) => 组件<...>)>) | (字符串 & ReactNodeArray) | (字符串 & ReactPortal);活动：布尔值； onClick: () => 函数； }' 但在 'Pick, HTMLButtonElement>, "form" 类型中是必需的 | ... 264 更多... | "onTransitionEndCapture"> & { ...; } & IButtonProps，“表单”| ... 267 更多... | "setActivity"> & 部分<...>, "form" | ... 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 是我传递给组件以引用的钩子。

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案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>
     );
};

【讨论】：

我可能没有理解，但我还没有使用 onClick={() => setActivity()}？
不，您使用的是() => setActivity，它返回setActivity。你最后缺少括号。应该是 () => setActivity()，就像 Sameh 说的那样。
哦，我错过了这个
除了添加括号之外还有什么我需要做的，因为我仍然遇到同样的错误。我也尝试过你的其他方法，但没有运气
IButtonProps 具有 setActivity 作为属性。这意味着您必须将其传递给Button 组件const Item = (props: any) => { const { children, active, setActivity, } = props; return ( <Button active={active} setActivity={() => {}} onClick={() => setActivity()} > {children} </Button> ); };