React/TypeScript自定义按钮函数签名问题：编辑器不认可=>void语法

你的代码语法错误出在onClick的函数类型定义上——函数类型的参数只写了类型但没有指定参数名称，TypeScript要求函数签名里的参数必须有标识符（哪怕你用不到这个参数，也得给个名字占位）。

修正后的代码 #

import React from 'react';
import ClearIcon from '@material-ui/icons/Clear';

export function ClearButton(props: { onClick: (event: React.MouseEvent<HTMLElement>) => void }) {
  // 简化写法：直接传递props.onClick，无需额外箭头函数包裹
  return (
    <span onClick={props.onClick}>
      <ClearIcon />
    </span>
  );
}

补充说明 #

1. 函数签名规范：TypeScript中定义函数类型时，必须遵循(参数名: 参数类型) => 返回值类型的格式，你之前的(React.MouseEvent<HTMLElement>) => void缺少参数名，导致编辑器报错。
2. 简化事件绑定：你原本写的onClick={(e) => { props.onClick(e) }}属于冗余写法，因为传递的箭头函数只是把事件原封不动传给props.onClick，直接写onClick={props.onClick}即可达到同样效果。
3. 可选写法（若无需事件对象）：如果父组件传递的onClick不需要使用事件参数，也可以用下划线占位参数名，避免未使用变量的警告：

export function ClearButton(props: { onClick: (_: React.MouseEvent<HTMLElement>) => void }) {
  return (
    <span onClick={props.onClick}>
      <ClearIcon />
    </span>
  );
}

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