create-react-app / babel / 绑定状态和函数答案

【问题标题】：create-react-app / babel / binding state and functionscreate-react-app / babel / 绑定状态和函数
【发布时间】：2021-01-11 05:08:21
【问题描述】：

感谢您的宝贵时间。我遇到了与this issue 重新解析错误相同的问题 - unexpected token = eslint on（最初状态 - 现在通过放入构造函数修复）handleClick。新项目，并认为此错误将持续到项目的其余部分。

class Header extends Component {
  constructor() {
    super();
    this.state = {
      activeItem: "home"
    };
  }
  
  handleClick = (event, { name }) => this.setState({ activeItem: name });

我是新手，如果这是一个简单的问题，我深表歉意。项目是用create-react-app安装的，没有babelrc文件，eslint如下。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: ["plugin:react/recommended", "airbnb", "prettier"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};

根据我的阅读，我必须将 babel 安装到项目中，并自定义配置以接受 state = { activeItem: "home" }; 如果我想在构造函数之外设置状态/函数并且需要使用“基本语法”来修复函数，我不确定基本语法是什么。帮助？！我认为行动的过程是创建一个 babelrc 配置文件，但我不确定为什么它已经安装了 create-react-app 并且不想安装一堆依赖项，除非我必须这样做。

感谢您的耐心等待。

【问题讨论】：

CRA 附带的 Babel 配置允许使用类字段（现在所有浏览器都支持它们），因此您应该能够使用字段语法 state = { activeItem: 'Home' }。错误来自 ESLint 还是 webpack 构建？
错误来自 eslint 文件（或者至少在编辑器中通过波浪线这样说），项目编译，但由于它没有渲染受此影响的组件而出现错误。 state = { activeItem: 'Home' } 和这个函数不能在构造函数之外声明而不显示错误。

标签： javascript reactjs babeljs create-react-app eslint

【解决方案1】：

看起来你需要稍微修正一下你的 ESlint 配置：

npm install eslint @babel/core @babel/eslint-parser --save-dev

然后添加

parser: "@babel/eslint-parser",

到你的 ESLint 配置的顶层。或者，您可以通过删除您的配置来使用默认的 Create React App ESLint 配置，这应该已经全部设置好了。

【讨论】：