create-react-app / babel / 綁定 state 和函數

Question

感謝您的時間。 我遇到了與此問題相同的問題，重新解析錯誤 - unexpected token = eslint on（最初是 state - 現在通過放入構造函數修復）handleClick。 新建項目，認為這個錯誤會繼續通過項目的rest。

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" }; 如果我想在構造函數之外設置 state / 函數並且需要使用“基本語法”來修復 function，我不確定基本語法是什么。 幫助？，我認為行動的過程是創建一個 babelrc 配置文件。 但不知道為什么如果它已經安裝了 create-react-app 並且不想安裝一堆依賴項，除非我必須這樣做。

感謝您的耐心等待。

Answer 1

看起來您需要稍微修復一下 ESlint 配置：

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

然后添加

parser: "@babel/eslint-parser",

到 ESLint 配置的頂層。 或者，您可以通過刪除您的配置來使用默認的 Create React App ESLint 配置，該配置應該已經全部設置好了。