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

Question

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

我试图将一个钩子函数作为道具传递给一个组件，我已经将其添加到接口中，但我遇到了这个我无法理解的错误。

没有与此调用匹配的重载。重载1/2，'(props:Pick，HTMLButtonElement>，"form"|…264更多…|"onTransitionEndCapture">&{…；}&IButtonProps，"form"|…267更多…|，给出以下错误。类型"｛children:string|(string&｛｝(|(stringe&ReactElement ReactElement Component(>(|(new(props:any(=>Component<…>(>(中缺少属性"setActivity"(string&ReactNodeArray(|(string&ReactPortal(；active:布尔；onClick:((=>函数；｝'但在类型'Pick，HTMLButtonElement>，"form"|中是必需的。。。264更多…|"onTransitionEndCapture">&｛…；｝&IButtonProps，"表单"|。。。还有267个…|"setActivity">&部分<…>，"表单"|。。。26

我试过一些我读过的东西，比如把这个方法放在一个匿名函数中，并把我的interact 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}

CCD_ 6也具有CCD_。这意味着您必须将其传递给Button组件

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