ES7中的箭头函数写法真的是很方便,而现今ReactJs又非常流行而且好用,非常适合有Java面向对象经验的同学学习和使用,在使用Reacjs构建组件时,如果想要使用箭头函数写法定义函数该怎么办呢?
首先,如果你直接在反应组件中使用箭头函数写法定义函数,编译是不会通过的,会报出语法错误。
错误。/模块/Repos.js
模块构建失败:SyntaxError: E:/AllWorkSpace/react-router/箱子/课程/01 -
建立/模块/回购。js:意想不到的令牌(16)
2 |}{链接导入“react-router”;
3 |出口默认类{回购扩展组件
比;4 | handleSubmit=()=比;{
| ^
5 |
6 |}
7 |渲染(){
@。/索引。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安装——save-dev babel-preset-es2015
npm安装——save-dev babel-preset-react
npm安装——save-dev babel-preset-stage-0
npm安装——save-dev babel-plugin-transform-class-properties
然后,在根目录下添加。babelrc文件,文件内容是
{
预设:[“反应”、“es2015”,“0阶段”),
“插件”(“transform-class-properties”):
}
在然后,在webpack.config.js中添加配置。
模块:{
加载器:(
{
测试:/\ . js/美元,
排除:/node_modules/,
装载机:“babel-loader& # 63;预设[]=反应,预设[]=es2015预设[]=0阶段'
}
]
}
之前
其中,这句装载机:“babel-loader& # 63;预设[]=反应,预设[]=es2015预设[]=0阶段'需要留意,而且顺序必须这样,不能错,要不然会报错。
错误。/模块/Repos.js
模块构建失败:SyntaxError: E:/AllWorkSpace/react-router/箱子/课程/01 -
建立/模块/回购。js:失踪的类属性变换。
2 |}{链接导入“react-router”;
3 |出口默认类{回购扩展组件
比;4 | handleSubmit=()=比;{
| ^
5 |
6 |}
7 |渲染(){
@。/索引。js 19:13-39
之前
好了,这样就可以为所欲为,随心所欲的使用自己喜爱的箭头函数写法了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
