当前位置:Gxlcms > JavaScript > 解析ReactJs中箭头函数的使用

解析ReactJs中箭头函数的使用

时间:2021-07-01 10:21:17 帮助过:19人阅读

这篇文章主要介绍了浅谈箭头函数写法在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中添加配置。


其中,这句 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

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

以上就是解析ReactJs中箭头函数的使用的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行