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

新来的TS，不得不说错误不是很友好

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

没有与此调用匹配的重载。 重载第1个，共2个，'（道具：Pick，HtmlButtoneElement>，“form”|…264更多…|“onTransitionEndCapture”>&{…}&IButtonProps，”，form“|…267更多…|“setActivity”>&{…}&{…}）：ReactElement'，给出了以下错误。 类型“{children:string |（string&{}）|（string&ReactElement ReactElement Component）>）|（new（props:any）=>Component）>）|（string&ReactNodeArray）|（string&ReactPortal）；active:Boolean；onClick:（）=>Function；}”中缺少属性“setActivity”，但在类型“Pick，HTMLButtonElement>，“form”|中是必需的。。。264更多…|“onTransitionEndCapture”>&{…}&IButonProps，“表单”|。。。267更多…|“setActivity”>&部分，“form”|。。。二十六

我已经尝试了一些我读过的东西，比如把这个方法放在一个匿名函数中，并将我的interfacet 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>
);

接口IButontops{
孩子们：弦，
活动：布尔，
设置活动：函数，
onClick：（e:React.MouseEvent）=>void，
}
//造型
const Button=styled.Button`
${（{theme}）=>`
边框：${theme.TabsBorder}；
字体大小：${theme.TabsFontsize}；
背景色：透明；
弹性：1；
填充：1rem；
大纲：0；
&：悬停{
背景色：${theme.TabActiveBackground}；
颜色：${theme.tabactivecolor}；
}
${（{active}）=>active&&`
背景色：${theme.TabActiveBackground}
颜色：${theme.tabactivecolor}；
`}
`}
`;
常数项：FC=({
儿童
活跃的，
setActivity，
}) => (
setActivity}
>
{儿童}
);

---

SetActivity是我传递到组件以引用的钩子

onClick

onClick

方法返回一个函数

setActivity:Function

，该函数不应为空。它应该是它的执行

onClick={() => setActivity()}

或者，如果

setActivity

函数已经是自绑定的，您可以立即将其传递给

onClick

属性

onClick={setActivity}

---

另外，

IButtonProps

将

setActivity

作为属性。这意味着您必须将其传递给

按钮

组件

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

const Item=（道具：任意）=>{
const{children，active，setActivity，}=props；
返回(
{}}
onClick={（）=>setActivity（）}
>
{儿童}
);
};

onClick方法返回一个函数

setActivity:Function

，该函数不应为空。它应该是它的执行

onClick={() => setActivity()}

或者，如果

setActivity

函数已经是自绑定的，您可以立即将其传递给

onClick

属性

onClick={setActivity}

---

另外，

IButtonProps

将

setActivity

作为属性。这意味着您必须将其传递给

按钮

组件

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

const Item=（道具：任意）=>{
const{children，active，setActivity，}=props；
返回(
{}}
onClick={（）=>setActivity（）}
>
{儿童}
);
};

我可能没有理解，但我是否已经在使用onClick={（）=>setActivity（）}？不，您正在使用返回

setActivity

的

=>setActivity

。你错过了结尾的括号。它应该是

（）=>setActivity（）

，就像Sameh说的那样。ohhhh我错过了这一点，除了添加括号之外，我还需要做其他事情，因为我仍然得到相同的错误。我也尝试过你的其他方法，但没有运气

IButtonProps

has

setActivity

as属性。这意味着您必须将它传递到

按钮
组件
常量项=（props:any）=>{const{children，active，setActivity，}=props；return（{}}}onClick={（）=>setActivity（）}>{children}）我可能没有理解转换，但我是否已经在使用onClick={（）=>setActivity（）}？不，您正在使用返回
setActivity
的
（）=>setActivity
。你错过了结尾的括号。它应该是
（）=>setActivity（）
，就像Sameh说的那样。ohhhh我错过了这一点，除了添加括号之外，我还需要做其他事情，因为我仍然得到相同的错误。我也尝试过你的其他方法，但没有运气
IButtonProps
has
setActivity
as属性。这意味着您必须将它传递到
按钮
组件
常量项=（props:any）=>{const{children，active，setActivity，}=props；return（{}}}onClick={（）=>setActivity（）}>{children}）