浅谈箭头函数写法在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定义类或函数的几种方式小结
Jan 09 Javascript
js中replace的用法总结
Dec 27 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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
php预定义常量
2006/12/25 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
phalcon框架使用指南
2016/02/23 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
logging level级别介绍
2020/02/21 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
社区交通安全实施方案
2014/03/22 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
歌剧魅影观后感
2015/06/05 职场文书
初中信息技术教学反思
2016/02/16 职场文书
《观察物体》教学反思
2016/02/17 职场文书
煤矿施工安全协议书
2016/03/22 职场文书