在我使用声纳扫描仪的 React 项目中出现意外标记 =（在模块模式下使用 espree 解析器）

Question

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

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;

第 6 行的错误。需要一个解决方案来解决这个问题。

Answer 1

我怀疑问题不是箭头函数，而是 class 字段。您的 handleClick 是一个 class 字段（基本上是一个属性声明），使用箭头函数作为其初始值设定项。 class fields 提案已经成熟，但仍处于第 3 阶段，尚未真正包含在规范中（甚至不包含在 ES2020 中）。相比之下，箭头函数已经在语言中存在了五年多。

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

Answer 2

为了在 class 中使用箭头函数，你需要在你的 babel 配置中启用这个插件。

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

或者你可以这样做

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

在我使用声纳扫描仪的 React 项目中出现意外标记 =（在模块模式下使用 espree 解析器）

Unexpected token = (with espree parser in module mode) in my react project using sonar-scanner

javascript

reactjs

sonarqube

sonarqube-scan