Question

我正在使用React学习TypeScript，它令人沮丧和挑剔，但我坚持使用它。目前，我的内联onClick收到打字稿消息，不确定如何处理。

type MenuProps = {
  openMenu: Function;
  toggle: string;
  slidein: string;
};
...
const Menu: FunctionComponent<MenuProps> = ({ openMenu, toggle, slidein }) => {
...
  <div className={`menu ${toggle}`} onClick={openMenu}>
...

我收到的消息是：

Type 'Function' is not assignable to type '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'.
  Type 'Function' provides no match for the signature '(event: MouseEvent<HTMLDivElement, MouseEvent>): void'

The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

更新

要增加我的复杂性和大脑痉挛...这些是我想起的onClick事件，我想它们需要不同的类型情况。

<div className={`expand ${slidein}`}>
  <ul>
    <li>
      <Link to="/" onClick={openMenu}>
        List
      </Link>
    </li>
    <li>
      <Link to="/add-user" onClick={openMenu}>
        Add User
      </Link>
    </li>
    <li>Add Climb</li>
  </ul>
</div>

Answer 1

指出您的openMenu属性类型定义太宽泛。例如，它们可能传入一个期望接收数字作为其第一个参数的函数，该函数与onClick处理程序将执行的操作不匹配。所以更具体地像这样：

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

type MenuProps = {
  openMenu: (event: MouseEvent<HTMLDivElement>) => void;
  toggle: string;
  slidein: string;
};

试图了解有关我的onClick事件的TypeScript消息

1 个答案: