React中回调函数返回匿名函数导致onClick触发TypeScript编译错误

你的代码报错核心是**onClick属性的函数类型不匹配**：

React的onClick事件处理器要求传入的函数要么不接收参数，要么接收一个MouseEvent类型的事件对象。但你当前的写法里，handleClick('red one')返回的是一个需要接收string类型参数的函数，和onClick期望的类型完全冲突，所以TypeScript抛出了类型不兼容的错误。

错误写法的问题拆解 #

原代码中：

const handleClick = () => (label: string) => {
  console.log('label: ' + label)
}

handleClick是一个无参函数，调用它（handleClick()）会返回另一个需要string参数的函数。当你把handleClick('red one')传给onClick时，相当于把这个需要string的函数绑定给了点击事件。而点击事件触发时，React会自动传入鼠标事件对象，这个对象是MouseEvent类型，不是string，自然就会触发类型报错。

修复方案 #

这里提供三种常用的修复方式：

方案一：调整高阶函数结构（推荐）

让handleClick先接收label参数，再返回符合onClick要求的事件处理器函数：

import React from 'react'

export default function Test() {
  const handleClick = (label: string) => () => {
    console.log('label: ' + label)
  }

  return <button onClick={handleClick('red one')}>click me</button>
}

方案二：保留事件参数（如需使用事件）

如果需要在处理函数中获取鼠标事件对象，可以这样写：

import React from 'react'

export default function Test() {
  const handleClick = (label: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log('label: ' + label, '事件对象:', event)
  }

  return <button onClick={handleClick('red one')}>click me</button>
}

方案三：直接用箭头函数包裹

更直观的写法，直接在onClick中用箭头函数调用目标函数并传参：

import React from 'react'

export default function Test() {
  const handleClick = (label: string) => {
    console.log('label: ' + label)
  }

  return <button onClick={() => handleClick('red one')}>click me</button>
}

内容的提问来源于stack exchange，提问作者Islam Y-