浅谈箭头函数写法在ReactJs中的使用
ES7中的箭头函数写法真的是很方便，而现今ReactJs又非常流行而且好用，非常适合有Java面向对象经验的同学学习和使用，在使用Reacjs构建组件时，如果想要使用箭头函数写法定义函数该怎么办呢？
首先，如果你直接在React组件中使用箭头函数写法定义函数，编译是不会通过的，会报出语法错误。
ERRORin./modules/Repos.js
Modulebuildfailed:SyntaxError:E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js:Unexpectedtoken(4:16)
2|import{Link}from'react-router';
3|exportdefaultclassReposextendsComponent{
>4|handleSubmit=()=>{
|^
5|
6|}
7|render(){
@./index.js19: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这四个组件了。
npminstall--save-devbabel-preset-es2015 npminstall--save-devbabel-preset-react npminstall--save-devbabel-preset-stage-0 npminstall--save-devbabel-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'需要留意，而且顺序必须这样，不能错，要不然会报错。
ERRORin./modules/Repos.js
Modulebuildfailed:SyntaxError:E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js:Missingclasspropertiestransform.
2|import{Link}from'react-router';
3|exportdefaultclassReposextendsComponent{
>4|handleSubmit=()=>{
|^
5|
6|}
7|render(){
@./index.js19:13-39
好了，这样就可以为所欲为，随心所欲的使用自己喜爱的箭头函数写法了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。