JavaScript ES6语法是什么？

Question

学习React，我正在查看Google的MaterialUI文档，它显示的语法如下：

export default class DialogExampleModal extends React.Component {
  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };
...

使用es2015的Babel在此代码的state =部分失败：

ERROR in ./client/App.jsx
Module build failed: SyntaxError: Unexpected token (23:8)

  21 |   }
  22 | 
> 23 |   state = {
     |         ^
  24 |     open: false,
  25 |   };
  26 | 

我的问题是，这是什么语法，我是否可能将某些配置错误？ 看来其他ES2015语法也可以正常工作。

Answer 1

我认为您需要像这样在构造函数中设置类的属性：

export default class DialogExampleModal extends React.Component {

  constructor() {
    this.state = {
      open: false,
    };

    this.handleOpen = () => {
      this.setState({open: true});
    };
  }

}

或者，您可以使用transform-class-properties babel插件，从问题中编译代码。

Answer 2

好吧，让我惊讶的第一件事是示例代码在状态代码之前有一个大括号，而您的代码有一个右括号。

export default class DialogExampleModal extends React.Component { // HERE
  state = { // HERE
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

你的呢：

  21 |   } // HERE
  22 | 
> 23 |   state = {

如果要在状态函数之前关闭组件，则它将抛出错误，因为这是一个未定义的函数，它在组件外部并不期望。

如果那是组件内部的另一个函数，则需要在其后加上分号。

  21 |   }; // SEMICOLON HERE
  22 | 
> 23 |   state = {