意外的标记 = 在 React JS 类中的第一个函数上

Posted 2023-02-21

【中文标题】意外的标记 = 在 React JS 类中的第一个函数上

【英文标题】：Unexpected token = on first function in a class of React JS

【发布时间】：2019-03-21 05:54:39

【问题描述】：

这段代码运行良好，只是一直看到这个错误很烦人。

所以这对于 babel-sublime 来说是一个非常大的错误，而且那里还有一个问题悬而未决，但还没有答案。问题链接：https://github.com/babel/babel-sublime/issues/363。

问题是，当你在 ReactJs 中创建一个类，然后在这个类中创建两个函数时，第一个函数会被着色为错误提示：

意外的令牌 = (null)

第二个函数没有错误，总是第一个。请注意，这是箭头函数。

此代码将在安装了 babel-sublime 包的 Sublime Text 3 中执行：

    import React,  Component  from 'react';
    class MyComponent extends Component 
        firstFunction = () => 
            return false;
        
        secondFunction = () => 
            return false;
        
        thirdFunction = () => 
            return false;
        
        render() 
            return(
                <div>
                    Component
                </div>
            );
        
    
    export default MyComponent;

无论您使用什么主题或配色方案，都会出现此错误。我在这里放了一个屏幕截图，这样您就可以看到与第一个函数和第二个函数不同的颜色，依此类推（屏幕截图中没有错误，因为我在 linter 规则中停用了它）。

编辑：我将我的 .eslintrc 内容放给你看是否有什么东西导致了这个错误。

  "parser": "babel-eslint",
  "ecmaFeatures": 
    "modules": true,
    "arrowFunctions": true,
    "classes": true
  ,
  "env": 
    "node": true,
    "browser": true,
    "es6": true,
  ,
  "rules": 
    "no-console": 0,
    "no-mixed-spaces-and-tabs": 0,
    "react/prop-types": 0,
    "react/no-unescaped-entities": 0,
    "react/no-string-refs": 0,
    "no-useless-escape": 0,
    "no-irregular-whitespace": 0,
    "strict": 0
  ,
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
  ],
  "parserOptions": 
      ecmaVersion: 6,
      ecmaFeatures: 
          jsx: true,
      ,
      sourceType: "module"
  ,

【问题讨论】：

我认为我的实际 .eslintrc 不是问题，但只是为了将其视为可能的问题，我编辑了问题，以便您可以告诉我是否有问题发生。

【参考方案1】：

你试过在这里检查吗？ https://github.com/babel/babel-loader/issues/479

您是否也尝试在 .eslintrc 文件中启用 babel-eslint ？ 尝试从

安装它

$ npm install eslint@4.x babel-eslint@8 --save-dev

或

$ yarn add eslint@4.x babel-eslint@8 -D

然后将此配置包含在您的 eslint 配置文件 (.eslintrc) 中

  "parser": "babel-eslint",
  "rules": 
    "strict": 0
  

希望它能有所帮助！

【讨论】：

您好，感谢您的回答。我安装了这个，但在全球范围内，仍然没有任何变化。对于 .eslintrc 文件，我已经将解析器设置为 babel-eslint，将严格规则添加为 0 没有任何区别。