浅谈箭头函数写法在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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript cookies操作集合
Apr 12 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
vue项目实现多语言切换的思路
Sep 17 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript 闭包疑问
2010/12/30 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python中删除文件的程序代码
2011/03/13 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python实现Adapter模式实例代码
2018/02/09 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
详解python3中的真值测试
2018/08/13 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python是如何进行类型转换的
2013/06/09 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
领导班子整改措施
2014/10/24 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS