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 - 箭頭函數上的意外標記

回答

相關問題