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 = {

这个JavaScript ES6语法是什么？

2 个答案: