javascript - 将 State 添加到我的 React 设置会导致 "./src/Main.js Module build failed"

Question

我正在尝试使用一些 Button 组件制作一个简单的 React 应用程序。

我希望能够将 state 添加到我的应用程序而不会出现错误。但是当我向应用程序添加状态时，控制台中出现以下错误:

SyntaxError: C:\Users\Roland\React_apps\calculator-project\src\Main.js: Support for the experimental syntax 'classProperties' isn't currently enabled (4:8):

[0m [90m 2 | [39m[0m
[0m [90m 3 | [39m[36mclass[39m [33mMain[39m [36mextends[39m [33mComponent[39m {[0m
[0m[31m[1m>[22m[39m[90m 4 | [39m    state [33m=[39m {[0m
[0m [90m   | [39m         [31m[1m^[22m[39m[0m
[0m [90m 5 | [39m       display[33m:[39m [32m"0"[39m[33m,[39m[0m
[0m [90m 6 | [39m       equation[33m:[39m [32m""[39m[0m
[0m [90m 7 | [39m   }[33m;[39m[0m

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    at Object.raise

我尝试运行 npm i @babel/plugin-proposal-class-properties --save-dev 来安装建议的包，但它没有改变任何东西。我还进入 .babelrc 并添加:

{
    "plugins": [
        "babel/plugin-proposal-class-properties"
    ]
}

也没有产生任何结果。

通过检查其他线程，我知道我应该发布我的 package.json:

{
  "name": "calculator-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

和webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

我尝试使用 Create React App 重新制作应用程序(而不是我当前的自定义设置)，并且错误没有出现在那里。虽然我并不真的需要解决这个问题，但我很好奇出了什么问题。

有人能花点时间解释一下吗？

编辑:这是 main.js 充当 app.js 的一部分:

import React, { Component } from "react";

class Main extends Component {
    state = {
        display: "0",
        equation: ""
    };

    inputNum(e) {
        console.log(e.target.value);
    }

    render() {
        return (
            <div>
                <Button
                    value="/"
                    display="/"
                    class="button col-4 row-1"
                    // click={this.inputNum}
                >
                    /
                </Button>
                // ... more buttons ...
                <Button
                    value="."
                    display="."
                    class="button col-3 row-5"
                    click={this.inputNum}
                >
                    .
                </Button>
            </div>
        );
    }
}

const Button = props => (
    <button
        type="button"
        id={props.id}
        value={props.value}
        className={props.class}
        onClick={props.click}
    >
        {props.display}
    </button>
);

export default Main;

Answer 1

可能只是您的 .babelrc 中的拼写错误，我认为 @ 是必需的。

{
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}