Heim > Artikel > Web-Frontend > Tutorial zum dynamischen Laden von ES6-Codekomponenten
In diesem Artikel wird hauptsächlich die detaillierte Erklärung von React mit require.ensure() zum Laden von ES6-Komponenten bei Bedarf vorgestellt, auf die sich Freunde in Not beziehen können it
Führen Sie zunächst die dynamische Ladefunktion ein:
require.ensure([], (require)=>{ let A = require('./a.js').default; })
Wenn Sie eine ES6-Codekomponente dynamisch laden möchten, ist es aufgrund der allgemeinen Sprachkompilierung nicht möglich, direkt eine ES6-Stilkomponente anzufordern Tools (z. B. babel) unterstützen nicht die direkte Anforderung einer Komponente im ES6-Stil.
Dann gibt es eine Möglichkeit, das Problem zu lösen: Fügen Sie am Ende der im ES6-Modus geschriebenen Komponente einen Satz hinzu: 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 ( <p> <span onClick={this.doSomething} > 点击后,按需加载模块~ </span> {this.state.currentComponent} </p> ) } }
app2
import React,{Component} from 'react'; export default class Hello extends Component { render () { return ( <p>你好,祝你幸福,再见~</p> ) } } module.exports= Hello;
Da in require.ensure()
require()
zum Einführen von Modulen verwendet wird, muss die Komponente mit module.exports
Besondere Empfehlung: Download der Version „php Programmer Toolbox“ V0.12.
Kostenloses JS-Online-Video-Tutorialphp.cn Dugu Jiujian (3) – JavaScript-Video-TutorialDas obige ist der detaillierte Inhalt vonTutorial zum dynamischen Laden von ES6-Codekomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!