浅谈箭头函数写法在ReactJs中的使用
更新时间：2017年08月22日 14:48:16 作者：moxuelang
这篇文章主要介绍了浅谈箭头函数写法在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中的useState如何改变值不重新渲染的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
react中value与defaultValue的区别及说明
这篇文章主要介绍了react中value与defaultValue的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
react进阶教程之异常处理机制error Boundaries
在react中一旦出错,如果每个组件去处理出错情况则比较麻烦,下面这篇文章主要给大家介绍了关于react进阶教程之异常处理机制error Boundaries的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧2023-01-01
这篇文章主要介绍了React hooks的优缺点详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了React+CSS 实现绘制竖状柱状图，文章围绕主题展开详细的内容介绍。具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了react中常见hook的使用方式与区别，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了在 React 中使用 i18next,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
最新评论