箭头函数写法在ReactJs中的使用

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.

只有添加这四个组件，这样才能支持箭头函数写法。

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’ 需要留意，而且顺序必须这样，不能错，要不然会报错。

好了，这样就可以为所欲为，随心所欲的使用自己喜爱的箭头函数写法了。