ReactJS如何解决render()位置报缺少分号的语法错误？

这个属于JS/TS开发中非常典型的报错位置偏移问题，标记在第106行的错误不是真正的问题点：编译器解析到render() {这行代码时，才检测到前面的代码语法不完整，才会在这里抛出缺分号的错误。

排查修复步骤 #

• 优先检查第104行大括号闭合的前一个代码块：类的属性赋值（比如箭头函数类型的自定义方法、state声明）、方法内部的函数表达式、变量声明漏写结尾分号，是触发这类报错的最常见原因。
• 常见错误场景参考：

// 错误示例：类的箭头函数属性末尾漏写分号
class App extends React.Component {
  handleClick = () => {
    console.log("触发点击")
  } // 此处漏写分号，编译器会将报错指向后面的render方法行
  render() {
    return (
      <div className="App">
        <ParticlesBg type="circle" bg={true} />
      </div>
    )
  }
}

// 修复后写法：在类属性赋值末尾补充分号
class App extends React.Component {
  handleClick = () => {
    console.log("触发点击")
  }; // 补充分号即可解决报错
  render() {
    return (
      <div className="App">
        <ParticlesBg type="circle" bg={true} />
      </div>
    )
  }
}

• 手动排查找不到问题点的话，可以先注释掉第104行之后的所有代码，重新编译后新的报错位置就是真正漏写分号的位置。
• 如果项目配置了Prettier或ESLint，直接运行代码格式化命令，工具会自动高亮标注漏写分号的位置。

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