ES7中的箭頭函數寫法真的是很方便，而現今ReactJs又非常流行而且好用，非常適合有Java面向對象經驗的同學學習和使用，在使用Reacjs構建組件時，如果想要使用箭頭函數寫法定義函數該怎么辦呢？

首先，如果你直接在React組件中使用箭頭函數寫法定義函數，編譯是不會通過的，會報出語法錯誤。

ERROR in ./modules/Repos.jsModule 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-es2015npm install --save-dev babel-preset-reactnpm install --save-dev babel-preset-stage-0npm 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.jsModule 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

好了，這樣就可以為所欲為，隨心所欲的使用自己喜愛的箭頭函數寫法了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。