浅谈箭头函数写法在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

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

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

# react # 使用箭头函数 # 箭头 # JS中箭头函数与this的写法和理解 # JS箭头函数和常规函数之间的区别实例分析【 5 个区别】 # JavaScript中的函数申明、函数表达式、箭头函数 # JavaScript基础之this和箭头函数详析 # JavaScript箭头函数中的this详解 # 深入理解JavaScript 箭头函数 # JavaScript函数式编程(Functional Programming)箭头函数(Arrow # JavaScript ES6箭头函数使用指南 # JavaScript箭头函数_动力节点Java学院整理 # JavaScript哪些场景不能使用箭头函数 # 的是 # 如果你 # 好了 # 为所欲为 # 这四个 # 就可 # 怎么做 # 报错 # 好用 # 这句 # 很方便 # 现今 # 随心所欲 # 大家多多 # 面向对象 # 自己喜爱 # trunk # router # export

返回目录在线咨询

上一篇：什么是网站收录的标准_SEO优化教程
下一篇：阿里云服务器选购攻略：配置优化、建站部署与性能提升指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求