使用create-react-app创建项目后，函数式组件内定义方法出现语法错误

报错根因 #

你出现该语法错误的核心原因是混用了类组件的方法定义语法：handleClick = () => {} 这种属于类的公共字段写法，只能在class组件的类声明内部使用，而函数式组件本质是普通JS函数，内部不支持直接写这种无声明的赋值语句。

正确的函数式组件内方法定义写法 #

你可以任选以下两种常用写法：

• 普通函数声明

function DemoComponent() {
  // 方法定义
  function handleBtnClick() {
    console.log('按钮被点击')
  }

  return <button onClick={handleBtnClick}>测试按钮</button>
}

• 变量绑定箭头函数

function DemoComponent() {
  // 方法定义
  const handleBtnClick = () => {
    console.log('按钮被点击')
  }

  return <button onClick={handleBtnClick}>测试按钮</button>
}

其他排查项 #

如果修改写法后仍存在报错，可以确认两点：

• 你的组件文件后缀为.jsx（使用TypeScript则为.tsx）
• 所有方法定义都写在组件的return语句之前，不要将方法定义写在返回的JSX结构内部（行内匿名事件处理函数除外）

你提供的报错截图参考：

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