Heim  >  Artikel  >  Web-Frontend  >  Tutorial zum dynamischen Laden von ES6-Codekomponenten

Tutorial zum dynamischen Laden von ES6-Codekomponenten

零下一度
零下一度Original
2017-05-13 10:48:112208Durchsuche

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 &#39;react&#39;;
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

[Verwandte Empfehlungen]


1

Besondere Empfehlung: Download der Version „php Programmer Toolbox“ V0.12.

Kostenloses JS-Online-Video-Tutorial

3.

php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn