浅谈箭头函数写法在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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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 socket的讲解与实例分析
2013/06/13 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Laravel日志用法详解
2016/10/09 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python初步实现word2vec操作
2020/06/09 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
副总经理任命书
2014/06/05 职场文书
经营理念口号
2014/06/21 职场文书
个人求职信格式范文
2015/03/20 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
使用Pytorch训练two-head网络的操作
2021/05/28 Python
nginx内存池源码解析
2021/11/20 Servers
python字符串的一些常见实用操作
2022/04/06 Python