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

我试图将material-ui组件合并到由react-rocket-boilerplate构建的项目中。Reactjs Material-UI - 箭头函数上的意外标记

我得到这个错误：

[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是提供对材料的UI文档站点只有第一leftNav例子（“SIMPLE控制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}); 
}

...它解决了错误，但不允许我访问“这个”，当它被调用。在这种情况下使用时

箭头的功能实现编译：

import React from 'react'; 

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

export default Logo;

我很乐意提供任何及所有其他信息，可能会帮助，只是让我知道。

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

来源

2016-01-22 Eric Hedden

当你改变了箭头功能，普通的旧功能，你应该同时分配事件处理程序使用“绑定”，像这样 -

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

走上语法，其ES6类，则使用箭头函数声明预先绑定的方法，我没有亲自使用gulp，但是你提到的源代码链接似乎使用了babel和ES6的支持，代码应该编译为：|。等待知道这个的人的回答。

来源

2016-01-22 09:03:39 hazardous

你的建议肯定能行！至少我可以继续我目前的工作。非常感谢你。就像你所说的，虽然我不知道它为什么不用箭头函数编译，但它很好解决这个问题。希望有人在那里有一些见解。 –

很高兴知道这部分帮助你。你提到你的代码是基于现有的锅炉板，希望你也有一个正确的配置babelrc文件。请使用您的投票表示有用的答案，谢谢。 – hazardous

从babeljs [docs]（https://babeljs.io/docs/setup/#gulp），如果您安装了babel 6，则不会提供预设，请检查您是否安装了ES 2015预设。你可以使用这个命令的'npm install babel-preset-es2015 --save-dev'安装它 – hazardous

我知道这个问题已经过时了，但是我今天刚刚开始使用反应，而且我也遇到过类似的问题。我设法通过在构造函数中将有问题的函数绑定到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}); 
}

我不喜欢这个解决方案，因为它似乎超级哈克。如果我找出“正确”的方式来做到这一点，我会跟进。

来源

2016-08-03 08:28:14 evancohen

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

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

.babelrc

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

来源

2016-10-01 12:54:25

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

回答

相关问题