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


Posted in Javascript onAugust 22, 2017

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
js时间戳与日期格式之间相互转换
Dec 11 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
微信小程序签到功能
Oct 31 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 #Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 #Javascript
bootstrap multiselect下拉列表功能
Aug 22 #Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
You might like
文档对象模型DOM通俗讲解
2013/11/01 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python 网络爬虫初级实现代码
2016/02/27 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python视频按帧截取图片工具
2019/07/23 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python的Lambda函数用法详解
2019/09/03 Python
python实现静态web服务器
2019/09/03 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
建筑工地标语
2014/06/18 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015初中团委工作总结
2015/07/28 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL