ES6 在 React 中定义状态的方法答案

【问题标题】：ES6 way to define state in ReactES6 在 React 中定义状态的方法
【发布时间】：2018-06-19 19:33:21
【问题描述】：

我想这样使用状态：

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

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

【问题讨论】：

是 babel 抛出错误，还是你的浏览器。只要它被转译，它看起来应该可以工作。
@samanime AFAIK 那是 Babel 在扔这个。
您能否将 Babel 的完整输出添加到针对一个小示例（如您共享的示例）运行时出现的错误？

标签： javascript reactjs ecmascript-6 babeljs

【解决方案1】：

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

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

【讨论】：

我相信你可以省略experimentalObjectRestSpread 选项。并设置ecmaVersion。

【解决方案2】：

做你想做的事的典型方法是在构造函数中设置this.state：

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

【讨论】：

他正在尝试通过 Babel 使用 ES6 语法（目前是第 3 阶段）：class fields
如果不需要在构造函数中使用道具，这通常是首选，因为它避免了调用函数的需要并消除了像必要的super(props)调用那样的混乱，在这种情况下
samanime 是对的，我不熟悉。但它存在：github.com/tc39/proposal-class-fields#field-declarations
虽然这会起作用，但它不是他正在寻找的 es6 字段声明。
@Code-Apprentice 我会，但我相信他发布的内容应该有效，这意味着存在一些错误，仅通过他发布的内容无法识别。我已经要求提供更多信息。如果他发布它并且我可以发现信息，我一定会发布答案。

【解决方案3】：

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

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

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

另外，启用 babel 预设的推荐方法是通过 .babelrc 文件。它应该放在项目根目录中。

【讨论】：

尝试使用他们网站上推荐的.babelrc。
使用一个或另一个应该都是一样的。与使用stage-2 或直接使用转换相同。这一切最终都会以同样的方式解决。
朋友们不要让朋友们在真实应用中使用stage-X预设。
舞台预设本质上并不可靠。它是草案（TC39 提案）的草案（WIP 实施）。理想情况下，应该使用preset-env + 精心挑选的插件。可信来源：2ality.com/2017/02/babel-preset-env.html