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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    ES7中的箭头函数写法真的是很方便,而现今ReactJs又非常流行而且好用,非常适合有Java面向对象经验的同学学习和使用,在使用Reacjs构建组件时,如果想要使用箭头函数写法定义函数该怎么办呢? 首先,如果你直接在React组件中使用箭头函数写法定义函数,编译是不会通过的,会报出语法错误. ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lesso

  • 浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    定义 function Person(national,age) { this.age = age; //实例对象,每个示例不同 Person.national = national; //类对象,所用实例公用 var bb = 0; //局部变量,外面不能访问(类似局部函数) } 调用 var p = new Person("中国", 29); document.writeln("age:" + p.age); document.writeln("obj

  • 浅谈在函数中返回动态的内存

    浅谈在函数中返回动态的内存

    1.有以下题目: #include <iostream> using namespace std; void GetMemeory(char* p) { p=(char*)malloc(sizeof(char)*100); } int main() { char *str=NULL; GetMemeory(str); strcpy(str,"Thunder"); strcat(str,"Downloader"); printf(str); system(

  • 浅谈function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • 浅谈JS函数定义方式的区别

    关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行以前被加载到作用域中,而例二则是在代码执行到那一行的时候才会有定 义: 区别二:函数声明会给函数指定一个名字,而函数表达式则是创建一个匿名函数,然后将这个

  • 浅谈JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { alert(this); //this是window }; 2.方法形态: o = {}; o.foo = foo; //将函数foo赋值给对象o的foo属性 o.foo(); //弹出的是object,此时的this表示object var lib = { test:function() { alert(t

  • 浅谈C++函数声明后面加throw()的作用(必看)

    问题描述: C++里面为什么有时候在函数声明的时候在后面加throw()关键字? 解释: C++函数后面加关键字throw(something)限制,是对这个函数的异常安全作出限制:这是一种异常规范,只会出现在声明函数时,表示这个函数可能抛出任何类型的异常. void fun() throw();      //表示fun函数不允许抛出任何异常,即fun函数是异常安全的. void fun() throw(...);    //表示fun函数可以抛出任何形式的异常. void fun() thr

  • 浅谈static a[n*m]={0};中static的作用

    正如我们知道的,函数内部的一般变量和数组都在栈区开辟内存,但是栈区的内存是有限的,当我们要开辟的内存较大时,编译器会报错,那我们该如何处理呢? 我们又知道,static int a;表示在全局区为变量a分配内存,同理我们在数组前面加上static之后,系统也为该数组在全局区分配内存,全局区的总内存比较大,一般会满足我们的需求. 如题:当n*m比较大时,这就是为什么static a[n*m]={0};必须带着static的原因了. 以上这篇浅谈static a[n*m]={0};中static的作

  • 浅谈python函数之作用域(python3.5)

    1 基本概念 1.1 命名空间 (namespace) 命名空间是变量名到对象的映射(name -> obj).目前大多数的命名空间以类似于python字典的形式实现,实现形式在未来可能发生变化.命名空间举例:内置变量(内置函数abs, 内置的异常等),模块中的全局变量,函数调用时的局部变量.在某种意义上讲,对象的属性也形成一个命名空间.重要的是,不同的命名空间中的变量没有任何关联,两个不同的命名空间中可以包含相同的变量名. 命名空间有不同的创建时间和生命周期: •内置变量命名空间在python

随机推荐