詳解React開發(fā)中使用require.ensure()按需加載ES6組件
首先介紹下動(dòng)態(tài)加載函數(shù):
require.ensure([], (require)=>{ let A = require('./a.js').default; })
如果想要?jiǎng)討B(tài)加載出es6代碼組件,直接require一個(gè)es6風(fēng)格的組件是不行的,因?yàn)橐话愕恼Z言編譯工具(如babel),不支持直接require一個(gè)es6風(fēng)格的組件。
那么有種辦法可以解決:在es6方式書寫的組件底部增加一句:module.exports = YouclassName;
import React, {Component} from 'react'; export default class Father extends Component { constructor (props)=>{ super(); this.state = { currentComponent:null } } doSomething = () => { require.ensure(['./app2'], (require) => { const Comp = require('./app2'); this.setState({ currentComponent:<Comp /> }) }) } render () { return ( <div> <span onClick={this.doSomething} > 點(diǎn)擊后,按需加載模塊~ </span> {this.state.currentComponent} </div> ) } }
app2
import React,{Component} from 'react'; export default class Hello extends Component { render () { return ( <div>你好,祝你幸福,再見~</div> ) } } module.exports= Hello;
因?yàn)樵?code>require.ensure()中使用了require()
引入模塊,所以組件后必須用module.exports
導(dǎo)出組件;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法
- react build 后打包發(fā)布總結(jié)
- ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號(hào)操作
- React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
- react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼
- React降級(jí)配置及Ant Design配置詳解
- 詳解Ant Design of React的安裝和使用方法
- React使用UI(Ant?Design)框架的詳細(xì)過程
相關(guān)文章
react-native-video實(shí)現(xiàn)視頻全屏播放的方法
這篇文章主要介紹了react-native-video實(shí)現(xiàn)視頻全屏播放的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03react將文件轉(zhuǎn)為base64上傳的示例代碼
本文主要介紹了react將文件轉(zhuǎn)為base64上傳的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09關(guān)于hooks中useEffect()的使用總結(jié)
這篇文章主要介紹了關(guān)于hooks中useEffect()的使用總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03