Reactjs Material-UI - 箭头函数上的意外标记答案

【问题标题】：Reactjs Material-UI - Unexpected token on arrow functionsReactjs Material-UI - 箭头函数上的意外标记
【发布时间】：2016-01-22 05:57:00
【问题描述】：

我正在尝试将 material-ui 组件合并到基于 react-rocket-boilerplate 构建的项目中。

我收到此错误：

[23:55:11] gulp-notify: [编译错误] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: 解析文件时出现意外令牌 (13:15): C: \react-rocket-boilerplate\app\js\components\Sidebar.js

注意：Sidebar.js 是 material-ui 文档站点上提供的第一个 leftNav 示例（“SIMPLE CONTROLLED LEFTNAV”）的精确副本，只是更改了组件名称。

这里是 Sidebar.js：

import React            from 'react';
import LeftNav          from 'material-ui/lib/left-nav';
import MenuItem         from 'material-ui/lib/menus/menu-item';
import RaisedButton     from 'material-ui/lib/raised-button';

export default class Sidebar extends React.Component {

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

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

  render() {
    return ( 
      <div>
        <RaisedButton
          label="Simple Controlled LeftNav"
          onTouchTap={this.handleToggle} />
        <LeftNav open={this.state.open}>
          <MenuItem>Menu Item</MenuItem>
          <MenuItem>Menu Item 2</MenuItem>
        </LeftNav>
      </div>
    );
  }
}

这是有问题的行：

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

(13:15) 处的字符是紧跟在“handleToggle”之后的空格。

我可以改用这个语法：

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

...它解决了错误，但在被调用时不允许我访问“this”。

箭头函数在此上下文中使用时可以编译：

import React from 'react';

const Logo = () => (
  <div className="logo">
    Hello World
  </div>
);

export default Logo;

我非常乐意提供任何可能有帮助的其他信息，请告诉我。

另外...对于组件定义的这些不同语法/格式是否有一个术语？

【问题讨论】：

标签： javascript reactjs gulp material-ui arrow-functions

【解决方案1】：

我遇到了同样的问题。我已经通过安装 babel-preset-stage-1 解决了这个问题，并将其添加到 .babelrc 文件中。

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

.babelrc

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

【讨论】：

【解决方案2】：

当您将箭头函数更改为普通的旧函数时，您应该在分配事件处理程序时使用“绑定”，就像这样 -

onTouchTap={this.handleToggle.bind(this)}

关于语法，它的ES6类，使用箭头函数声明预绑定方法，我个人没有使用过gulp，但是你提到的源链接似乎是使用支持ES6的babel，代码应该已经编译： |。等待知道这件事的人的回答。

【讨论】：

您的建议绝对有效！至少我可以继续我现在正在做的事情。非常感谢你。就像你说的那样，我不知道为什么它不使用箭头函数进行编译......而且解决这个问题会很好。希望有人对此有所了解。
很高兴知道这对您有所帮助。你提到你的代码是基于现有的样板，希望你也有一个带有正确配置的 babelrc 文件。请使用您的投票来表明一个有用的答案，谢谢。
来自 babeljs docs，如果你安装了 babel 6，它没有自带预设，请检查你是否安装了 ES 2015 预设。您可以使用此命令安装它npm install babel-preset-es2015 --save-dev

【解决方案3】：

我知道这个问题很老了，但是我今天才开始玩 react 并且遇到了类似的问题。通过将有问题的函数绑定到构造函数中的this，我设法让它在我的情况下工作。所以在你的情况下：

constructor(props) {
  super(props);
  this.state = {open: false};
  // Make our bindings here
  this.handleToggle = () => this.setState({open: !this.state.open});
  this.handleClose = () => this.setState({open: false});
}

我不是很喜欢这个解决方案，因为它看起来超级 hacky。如果我找到“正确”的方法，我会跟进。

【讨论】：