浅谈箭头函数写法在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 state结构设计原则示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家介绍了React 时间切片理解分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Hook 是 React 16.8 的新增特性，本文主要介绍了10种Hook的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了React如何使用emotion写css代码，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了react子组件接收的props赋值给state的陷阱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()
这篇文章主要介绍了一文搞懂 React 18 中的 useTransition()与useDeferredValue()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
this的本质可以这样说，this跟作用域无关的，只跟执行上下文有关。接下来通过本文给大家介绍React中es6创建组件this的方法，非常不错，感兴趣的朋友一起看看吧2016-08-08
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧2023-01-01
这篇文章主要介绍了react中的虚拟dom和diff算法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了关于react-router中的Prompt组件学习心得,Prompt组件作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面，本文结合示例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
最新评论