如何在 React 和 Webpack 中使用提议的 ECMAscript class 语法？

Question

我正在尝试学习 ecmascript 的建议 class 语法并将其与 React 一起使用，我已经使用带有 webpack 的 babel 成功渲染了带有 es6 的组件。现在我想在构造函数外部声明的 classes 中使用实例属性。例如：

class MyComponent extends React.Component{
  constructor(props){
   super(props)
  }

  property1= "new property"; 
  func1= ()=>{
   }
  }

我在 'property1' 和 'func1' 上遇到错误 "unexpected token"，同时尝试做这样的事情。另外，我在 webpack 中使用 babel presets for react 和 babel-preset-env 插件。

我想在我的 class 中限制使用 "this" 关键字，所以我认为较新的 es7 classes 可以实现这一点，我该怎么做？任何帮助将不胜感激。

编辑 1：如答案中所建议，我包含了 "babel-preset-stage-2" 预设，并且我能够在 class 中包含构造函数之外的变量，但必须使用 'this' 来引用它们。

Answer 1

为此您需要正确的 babel 插件。

npm install --save-dev babel-plugin-transform-class-properties

.babelrc

{
  "plugins": ["transform-class-properties"]
}

Answer 2

那个语法不是 "ES7"（我假设你的意思是 ES2016, aka the 7th edition). In fact, it's not even ES2017. It's still a Stage 3 proposal）。它可能如果在它在截止前达到第 4 阶段的时间。

要将它与 Babel 一起使用，请为该功能启用 stage-3 preset or the specific plugin (transform-class-properties)。

How to use the proposed ECMAscript class syntax with React and Webpack?