React Typescript：將 onClick 作為道具傳遞

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

我認為我可以通過將鼠標懸停在Box組件中的onClick鍵上並查看onClick采用什么類型來解決此問題。 將鼠標懸停在該鍵上會產生以下消息：

因此，我想修改{onClick}屬性如下：

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
}

隨着道具數量的增加，內聯類型聲明可能會變得混亂。 因此，將它們移動到指定類型是一個好習慣：

type Props = {
    onClick?: React.MouseEventHandler
}

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

如果以后您必須在此組件中接受children道具，它也有好處。 然后你可以使用帶有Props類型的React.FC助手：

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

Answer 2

最好使用 react 提供的類型。 考慮一下：

import React, { FunctionComponent, MouseEventHandler } from 'react';

interface Props {
  onClick?: MouseEventHandler;
}

const Button: FunctionComponent<Props> = ({ onClick }) => (
    <Box
      as="button"
      type="button"
      p="1"
      fontSize="2xl"
      color="gray.600"
      onClick={onClick}
      display={{ base: "block", lg: "none" }}
    >
      <HiOutlineMenu />
    </Box>
);

Answer 3

type THamburgerProps = {
  onClick: () => void;
}

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

function App(){
  return <Hamburger onClick={() => console.log("hanburger clicked!")}
}