Javascript 网页包错误：意外的令牌

朋友们！我有问题与网页包建设。 在webpack中，我使用babel 6^+此预设：

presets: ['es2015', 'stage-1', 'react']

npm启动后，我捕获错误：

ERROR in ./src/common/components/layout/Header.js
Module build failed: SyntaxError: C:/Users/Anton/projects/isomorphic-redux-app/src/common/components/layout/Header.js: Unexpected token (13:15)
  11 |   }
  12 |
  13 |   handleToggle = () => this.setState({open: !this.state.open});
     |                ^
  14 |
  15 |   render() {
  16 |     return (

起初我认为我的代码有错误，我只是从MaterialUI文档中复制/粘贴它，但它也坏了。 Header.js文件：

import React, { Component, PropTypes } from 'react';
import LeftNav from 'material-ui/lib/left-nav';
import AppBar from 'material-ui/lib/app-bar';
import RaisedButton from 'material-ui/lib/raised-button';

export default class Header extends Component {

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

  handleToggle = () => this.setState({open: !this.state.open});

  render() {
    return (
      <div>
        <RaisedButton
          label="Controlled LeftNav That Opens From Right"
          onTouchTap={this.handleToggle} />
        <LeftNav width={200} openRight={true} open={this.state.open} >
          <AppBar title="AppBar"/>
        </LeftNav>
      </div>
    );
  }
}

---

如何解决它？

您需要使用Babel stage 1来获取类属性

步骤1：添加依赖项，如下所示：

npm install babel-preset-stage-1 --save

{
  "presets": ["es2015", "react","stage-1"]
}

步骤2：按如下方式更改.lrc文件：

npm install babel-preset-stage-1 --save

{
  "presets": ["es2015", "react","stage-1"]
}

---

如果我是正确的，您正在尝试使用属性初始值设定项，这是ES7功能。要解决此问题，您必须使用阶段1预设

---

更多信息

此处不需要arrow函数（它的语法无效），因为您正在定义

类

方法：

handleToggle = () => this.setState({open: !this.state.open});

请尝试以下方法：

handleToggle() { this.setState({open: !this.state.open}); } 

但是，由于类方法不会自动绑定，因此需要在构造函数中或使用时绑定它：

constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleToggle = this.handleToggle.bind(this);
  }

如果您在

渲染

或其他类方法中，则需要将

常量

或等效项添加到前面（使用赋值时使用

=

）：

---

如果要在类上使用箭头函数并避免绑定到构造函数（此位）：

然后可以使用babel的变换类属性。为此，请在命令行中下载模块：

npm i --save babel-plugin-transform-class-properties

然后在您的.LRC中：

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

然后，您可以使用更干净的语法并删除构造函数中的绑定：

handleToggle = () => this.setState({open: !this.state.open});

---

这应该在stage-0或stage-1预设中，但我只通过显式引用插件（如上所述）使其工作。

您的网页包配置是什么样的？

handleToggle = () => this.setState({open: !this.state.open});