使用声纳扫描仪在我的反应项目中意外的令牌 =（在模块模式下使用 espree 解析器）

Posted 2023-03-16

【中文标题】使用声纳扫描仪在我的反应项目中意外的令牌 =（在模块模式下使用 espree 解析器）

【英文标题】：Unexpected token = (with espree parser in module mode) in my react project using sonar-scanner

【发布时间】：2020-11-20 04:28:29

【问题描述】：

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

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 行的错误。 需要一个解决方案来解决这个问题。

【问题讨论】：

你启用了“transform-class-properties”吗？

【参考方案1】：

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

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

或者你可以这样做

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

【讨论】：

是否有其他解决方案，因为早期的代码也可以正常工作并且不会导致任何问题。

你可以不使用箭头函数。如果你不使用箭头函数，那么你可以很容易地拥有类属性并将其附加到构造函数中的实例

【参考方案2】：

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

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

【讨论】：

您能建议我在哪里进行更改吗？

如果问题来自 Espree，听起来你需要更新 ESLint。当前版本的 ESLint 支持类字段。

我升级了 ESLint，但在使用声纳扫描仪时遇到了同样的问题。它显示相同的错误。在声纳扫描仪的情况下我应该怎么做？