鍍金池/ 問(wèn)答/HTML/ 如何配置babel，才能使得es6 的class中可以使用箭頭函數(shù)？

如何配置babel，才能使得es6 的class中可以使用箭頭函數(shù)？

如題，自己沒(méi)事找事想在es6的class中使用箭頭函數(shù)。（其實(shí)是想在react中組件類中使用箭頭函數(shù)，這樣就不用每個(gè)事件處理方法去bind（this）了）。

clipboard.png

clipboard.png

但是遇到代碼報(bào)錯(cuò)問(wèn)題讓我非常頭疼，我按照網(wǎng)上找的資料的說(shuō)法大致對(duì)babel對(duì)配置做了如下處理，如presets選項(xiàng)增加stage-3，增加plugin等，可是報(bào)錯(cuò)問(wèn)題還是存在。

請(qǐng)教各位有沒(méi)有可以實(shí)現(xiàn)的解決方案？

回答
編輯回答
我以為

babel只負(fù)責(zé)轉(zhuǎn)義！所以并非babel沒(méi)用，這個(gè)只是編輯器語(yǔ)法檢測(cè)報(bào)錯(cuò)了。

我所用的webstorm，需要設(shè)置語(yǔ)法環(huán)境。你可以查一下你的編輯器，看下哪里可以將語(yǔ)法設(shè)置為ES6 or react

clipboard.png

2017年3月10日 16:21
編輯回答
萌小萌

你大括號(hào)后面差個(gè)逗號(hào)

2017年7月3日 03:05
編輯回答
你好胸

是我寫法上的問(wèn)題，應(yīng)采用這樣的寫法，函數(shù)名后面跟=而不是：

class A {
  a = () => {}
}

此外，webpack中babel也得做配置，增加一個(gè)plugin，否則項(xiàng)目編譯階段仍然報(bào)錯(cuò)。
clipboard.png

2018年1月7日 23:26
編輯回答
陌璃

第一張圖應(yīng)該是 vsc 編輯器自己的檢查，在設(shè)置里面關(guān)掉就好，第二張圖貌似代碼寫錯(cuò)了吧，ES6 里面 class 往實(shí)例上面加方法語(yǔ)法是：

class A {
  a = () => {}
}

往構(gòu)造函數(shù)上面加靜態(tài)方法是用 static 關(guān)鍵詞，貌似不支持用冒號(hào)的寫法。

如果還有問(wèn)題可以貼一下 .babelrc 的配置

2017年9月16日 11:05
編輯回答
糖豆豆

首先，你要知道在class中寫箭頭函數(shù)作為屬性是react的語(yǔ)法。

基于此，如果你想阻止eslint的報(bào)錯(cuò)，你需要調(diào)整eslint對(duì)于react語(yǔ)法的檢查。

這里用到babel-eslint

只需兩步就可以了:

  1. npm i babel-eslint -D / yarn add babel-eslint -D
  2. 在你的.babelrc或package.json配置的babel內(nèi)加入 "parser": "babel-eslint",

希望能幫到你

2018年2月8日 08:51