reactjs - 意外的标记 = React JS 类中的第一个函数

Question

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

所以这很大程度上是 babel-sublime 的一个错误，而且那里也有一个问题尚未解决，但还没有答案。问题链接:https://github.com/babel/babel-sublime/issues/363 .

问题是，当您在 ReactJs 中创建一个类，然后在该类中创建两个函数时，第一个函数将被着色为错误:

Unexpected token = (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"
  },
}

Answer 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
  }
}

希望能帮到你!