Javascript 使用sonar scanner的react项目中出现意外标记=（espree解析器处于模块模式）

我在使用声纳扫描仪时遇到了这个错误。 它无法解析我使用过箭头函数的所有文件

import React from "react";
import { Button } from "antd";
import history from "src/components/history";

class BackButton extends React.Component {
  handleClick = () => {
    history.goBack();
    if (this.props.onBack) {
      this.props.onBack();
    }
  };
  render() {
    return <Button icon="arrow-left" onClick={this.handleClick} />;
  }
}

export default BackButton;

从“React”导入React；
从“antd”导入{Button}；
从“src/components/history”导入历史记录；
类BackButton扩展了React.Component{
handleClick=（）=>{
goBack（）；
如果（本.道具.背面）{
this.props.onBack（）；
}
};
render（）{
返回；
}
}
导出默认BackButton；

第6行的错误。

---

需要解决此问题。

我怀疑问题不在于箭头函数，而在于类字段。您的

handleClick

是一个类字段（基本上是一个属性声明），使用arrow函数作为其初始值设定项。该提案已经成熟，但仍处于第3阶段，尚未实际纳入规范（甚至不包括ES2020）。相比之下，arrow函数在该语言中已经使用了五年多

---

您需要确保启用对类字段的支持。

为了在类中使用箭头函数，您需要在babel配置中启用此插件

{
  "plugins": [
    "transform-class-properties"
  ]
}

或者你可以这样做

class BackButton extends React.Component {
  constructor() {
    super();
    this.handleClick = (val) => {
      ...
    };
    …
  }
}

---

您是否启用了“转换类属性”？您能建议我在哪里进行更改吗？如果问题来自Espree，听起来您需要更新ESLint。当前版本的ESLint支持类字段。我升级了ESLint，但声纳扫描仪也面临同样的问题。它显示了相同的错误。在声纳扫描仪的情况下，我应该怎么做？有没有其他解决方案，因为前面的代码也可以正常工作，不会引起任何问题。您可以不使用箭头函数来完成。。如果您没有使用箭头函数，那么您可以轻松地拥有类属性并将其附加到构造函数中的实例