React Typescript：将 onClick 作为 Prop 传递

Question

我正在尝试使用 React 和 Typescript 创建一个简单的汉堡菜单组件。我想要做的是将onClick事件处理程序作为道具传递给这个菜单组件。这是我目前拥有的代码：

function Hamburger({ onClick }) {
  return (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
  )
}

然而，打字稿抱怨{onClick}正在传递的道具：

Binding element 'onClick' implicitly has an 'any' type

我认为我可以通过将鼠标悬停在组件onClick中的键上Box并查看所采用的类型来解决此问题onClick。将鼠标悬停在该键上会产生以下消息：

因此，我想将{onClick}prop 修改如下：

function Hamburger({ onClick }: React.MouseEventHandler | undefined) {

但这只会产生一个新错误{onClick}：

Property 'onClick' does not exist on type 'MouseEventHandler<Element> | undefined'.ts(2339)
var onClick: any

我现在不知道该怎么办。因此，我想知道 - 我应该如何打字{onClick}？

谢谢。

Answer 1

功能组件的正确键入Hamburger是：

function Hamburger({ onClick }: { onClick? : React.MouseEventHandler }): JSX.Element {
    // actual code
}

随着 props 数量的增加，内联类型声明可能会变得混乱。因此，将它们移至指定类型是一个好习惯：

type Props = {
    onClick?: React.MouseEventHandler
}

function Hamburger({ onClick }: Props) JSX.Element {
    // actual code
}

如果稍后您必须接受children此组件中的 prop，它也有好处。然后你可以使用React.FChelperProps类型：

const Hamburger: React.FC<Props> = ({ onClick, children }) => { // no need to type `children` prop yourself
    // actual code
}