Question

我想通过这种方式使用状态：

class Checkout extends Component {
    state = {
        ingredients: null,
        totalPrice: 0
    };

但是我在说Unexpected token =时遇到错误，我知道可以通过 babel-plugin-transform-class-properties 来解决此问题，但是不幸的是，在我的情况下，此方法不起作用。
这是我的 package.json

"babel": {
    "presets": [
      "env",
      "react-app"
    ],
    "plugins": ["transform-class-properties"]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.1.0"
  }

你知道这里还有什么问题吗？

Answer 1

问题与Eslint有关。当我安装babel-eslint并将parcer选项添加到.eslintrc时，此错误消失了。

"parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],

Answer 2

执行所需操作的典型方法是在构造函数中设置this.state：

class Checkout extends Component {
    constructor() {
        this.state = {
            // Whatever keys and values you want here
        }
    }
}

Answer 3

尝试babel-preset-stage-2。它包括transform-class-properties和其他内容。并将其添加到您的babel presets数组

"babel": {
  "presets": [
    "env",
    "react-app",
    "stage-2"
  ]
}

这将允许您定义state ES6方式。

推荐的启用babel预设的方法是通过.babelrc文件。应该将其放置在项目根目录中。

ES6在React中定义状态的方法

3 个答案: