使用Babel将箭头函数作为类属性

Question

有人能解释一下React中的Babel如何支持将箭头函数作为类属性吗？ 使用Babel 试一试 我可以看到它们不被支持：

class Question {

  // Property (not supported)
  myProp = () => {
    return 'Hello, world!';
  }

  // Method (supported)
  myFunc() {
    return 'Hello, world!';
  }

}

ES6不支持类属性（如果我理解错误请纠正），但在使用Babel的React中它们可以工作。

我可以通过TypeScript区分方法和属性Playground，但我无法清楚地了解Babel是否支持它们。是否有一些插件？

更新：
Babel支持它们使用"babel-preset-stage-0"。

- isar

---

在左侧点击 stage-0 就可以工作了。Babel 支持它们。 - illiteratewriter

你的问题是关于 Babel 是否支持它们，如果我理解正确的话。是的，它支持。这就是为什么有 Babel 预设阶段 0 的原因。 - illiteratewriter

Answer 1

为了支持类属性，您需要安装并将 babel-plugin-transform-class-properties 添加到您的 .babelrc 的 plugins 设置中（或者在您的 webpack 配置中）。

请注意，该插件也包含在以下预设中:

• babel-preset-stage-0
• babel-preset-stage-1
• babel-preset-stage-2

因此，如果您使用其中之一，您不需要自己安装 babel-plugin-transform-class-properties。

- GG.

Answer 2

正如@illiteratewriter所建议的那样，类属性从Stage 0 preset开始得到支持。目前为止，它们受到支持，直到Stage 2 preset：

该提案现在必须额外具有功能的语法和语义的正式描述（使用ECMAScript规范的形式语言）。该描述应尽可能完整，但可以包含待办事项和占位符。需要两个功能的实验性实现，但其中一个可以是在转换器（例如Babel）中。

- isar

---

他们仍处于第二阶段（https://github.com/tc39/proposal-class-public-fields）。 - GG.

@GG，抱歉，我在转译器方面搞砸了。我已经更新了我的答案，谢谢。 - isar