React TypeScript传递事件处理函数作为Props时类型错误求助

错误原因 #

你遇到的类型错误核心是父组件传递的属性名和子组件Props定义的名称不匹配：

• 父组件给<Button>传的是onClick属性
• 子组件的Props接口只定义了handleClick，并没有onClick字段，所以TypeScript判定该属性不被允许

修复方案（二选一即可） #

方案1：修改父组件的传参名称

把父组件中传递给<Button>的属性名从onClick改成handleClick，和子组件Props定义一致：

// 父组件 Card.tsx
export default function Card(): JSX.Element {
  const [clear, setClear] = useState<boolean>(false);

  const handleClick: React.MouseEventHandler = (): void => {
    setClear(!clear);
  };

  return (
    <Wrapper>
      <Title>"5 birthdays today"</Title>
      {clear ? "" : list}
      {/* 修改属性名匹配子组件Props */}
      <Button handleClick={handleClick} />
    </Wrapper>
  );
}

方案2：修改子组件的Props定义

把子组件的Props接口中的handleClick改成onClick，保持和React原生事件属性命名一致：

// 子组件 Button.tsx
interface Props {
  // 调整属性名匹配父组件传参
  onClick: React.MouseEventHandler<Element>;
}

export default function Button({ onClick }: Props): JSX.Element {
  return <Btn onClick={onClick}>"Clear All"</Btn>;
}

此方案下父组件代码无需修改，保持<Button onClick={handleClick} />即可。

额外优化建议 #

定义MouseEventHandler时可以明确元素类型，比如如果Btn是按钮元素，可写成React.MouseEventHandler<HTMLButtonElement>，让类型检查更精准：

interface Props {
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

内容的提问来源于stack exchange，提问作者Hesam