Reactjs Material-UI - 箭头函数出现意外标记

Question

我正在尝试将material-ui组件融入基于react-rocket-boilerplate搭建的项目中。

我遇到了以下错误：

[23:55:11] gulp-notify: [Compile Error] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: Unexpected token (13:15) while parsing file: C:\react-rocket-boilerplate\app\js\components\Sidebar.js

注意：Sidebar.js是material-ui文档网站上提供的第一个leftNav示例（“简单控制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;

如果需要，我很乐意提供任何其他信息的帮助，请告诉我。

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

- Eric Hedden

Answer 1

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

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

.babelrc

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

- Bartlomiej Lewandowski

Answer 2

当您将箭头函数更改为普通函数后，应在分配事件处理程序时使用“bind”，如下所示 -

当你把箭头函数改成普通函数之后，你需要在分配事件处理函数时使用“bind”函数，例如：

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

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

- hazardous

---

你的建议绝对有效！至少我现在可以继续我的工作了。非常感谢你。不过，就像你所说的，我不知道为什么箭头函数不能编译...希望有人能提供一些见解。 - Eric Hedden

很高兴知道这部分内容对您有所帮助。您提到您的代码基于现有的样板，希望您也有一个正确配置的babelrc文件。请使用您的投票来表示一个有用的答案，谢谢。 - hazardous

从babeljs docs中得知，如果您已经安装了babel 6，但是没有预设项，请检查是否安装了ES 2015预设项。您可以使用以下命令进行安装：npm install babel-preset-es2015 --save-dev。 - hazardous

Answer 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。如果我找到了“正确”的方法，我会跟进的。

- evancohen