這篇文章主要介紹了淺談箭頭函數寫法在ReactJs中的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
ES7中的箭頭函數寫法真的是很方便，而現今ReactJs又非常流行而且好用，非常適合有Java面向對象經驗的同學學習和使用，在使用Reacjs構建組件時，如果想要使用箭頭函數寫法定義函數該怎麼辦呢？
首先，如果你直接在React元件中使用箭頭函數寫法定義函數，編譯是不會通過的，會報出語法錯誤。
ERROR in ./modules/Repos.js
Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js: Unexpected token (4:16)
2 | import {Link} from 'react-router';
3 | export default class Repos extends Component{
> 4 | handleSubmit = () => {
| ^
5 |
6 | }
7 | render(){
@ ./index.js 19:13-39如上所述，handleSubmit函數定義失敗，那要怎樣才能讓你的reactjs專案支援箭頭函數寫法呢，答案是 babel- preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties. 只有加入這四個元件，這樣才能支援箭頭函數寫法。
那我們該怎麼做呢，首先當然是安裝和下載babel-preset-es2015,babel-preset-react,babel-preset- stage-0,babel-plugin-transform-class-properties 這四個組件了。
npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-plugin-transform-class-properties
然後，在根目錄下新增.babelrc 文件，文件內容是
{
presets: [ "react","es2015","stage-0"],
"plugins": ["transform-class-properties"]
}在然後，在webpack.config.js中新增配置。
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
}
]
}其中，這句話loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' 需要留意，而且順序必須這樣，不能錯，要不然會報錯。
ERROR in ./modules/Repos.js
Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js: Missing class properties transform.
2 | import {Link} from 'react-router';
3 | export default class Repos extends Component{
> 4 | handleSubmit = () => {
| ^
5 |
6 | }
7 | render(){
@ ./index.js 19:13-39好了，這樣就可以為所欲為，隨心所欲的使用自己喜愛的箭頭函數寫法了。
以上是解析ReactJs中箭頭函數的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
