淺談箭頭函數(shù)寫法在ReactJs中的使用
ES7中的箭頭函數(shù)寫法真的是很方便，而現(xiàn)今ReactJs又非常流行而且好用，非常適合有Java面向?qū)ο蠼?jīng)驗(yàn)的同學(xué)學(xué)習(xí)和使用，在使用Reacjs構(gòu)建組件時(shí)，如果想要使用箭頭函數(shù)寫法定義函數(shù)該怎么辦呢？
首先，如果你直接在React組件中使用箭頭函數(shù)寫法定義函數(shù)，編譯是不會(huì)通過的，會(huì)報(bào)出語法錯(cuò)誤。
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函數(shù)定義失敗，那要怎樣才能讓你的reactjs項(xiàng)目支持箭頭函數(shù)寫法呢，答案是 babel-preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties. 只有添加這四個(gè)組件，這樣才能支持箭頭函數(shù)寫法。
那么我們?cè)撛趺醋瞿兀紫犬?dāng)然是安裝和下載babel-preset-es2015,babel-preset-react,babel-preset-stage-0,babel-plugin-transform-class-properties 這四個(gè)組件了。
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 文件，文件內(nèi)容是
{
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' 需要留意，而且順序必須這樣，不能錯(cuò)，要不然會(huì)報(bào)錯(cuò)。
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
好了，這樣就可以為所欲為，隨心所欲的使用自己喜愛的箭頭函數(shù)寫法了。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JS中箭頭函數(shù)與this的寫法和理解
- JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個(gè)區(qū)別】
- JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
- JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
- JavaScript箭頭函數(shù)中的this詳解
- 深入理解JavaScript 箭頭函數(shù)
- JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法分析
- JavaScript ES6箭頭函數(shù)使用指南
- JavaScript箭頭函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- JavaScript哪些場景不能使用箭頭函數(shù)
相關(guān)文章
這篇文章主要介紹了React forwardRef用法,forwardRef允許你的組件使用ref將一個(gè)DOM節(jié)點(diǎn)暴露給父組件，本文結(jié)合案例分析給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-06-06
render props是指一種在 React 組件之間使用一個(gè)值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說，給一個(gè)組件傳入一個(gè)prop，這個(gè)props是一個(gè)函數(shù)，函數(shù)的作用是用來告訴這個(gè)組件需要渲染什么內(nèi)容，那么這個(gè)prop就成為render prop2022-11-11
React Hooks: useEffect()調(diào)用了兩次問題分析
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了如何在 React Native 中添加自定義字體,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue()，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
在React項(xiàng)目中引入國際化可以使用第三方庫來實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國際化，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
React實(shí)現(xiàn)虛擬滾動(dòng)的三種思路詳解
在??web??開發(fā)的過程中,或多或少都會(huì)遇到大列表渲染的場景,為了解決大列表造成的渲染壓力,便出現(xiàn)了虛擬滾動(dòng)技術(shù),本文主要介紹虛擬滾動(dòng)的三種思路,希望對(duì)大家有所幫助2024-04-04
React-router4路由監(jiān)聽的實(shí)現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
React啟動(dòng)時(shí)webpack版本沖突報(bào)錯(cuò)的解決辦法
在啟動(dòng)React應(yīng)用時(shí),遇到Webpack版本不匹配導(dǎo)致的運(yùn)行錯(cuò)誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據(jù)項(xiàng)目需求安裝特定版本的webpack,本文通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)，具有很好的參考價(jià)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09