Tutoriel sur la façon de charger dynamiquement les composants du code ES6

Cet article présente principalement l'explication détaillée de React utilisant require.ensure() pour charger des composants ES6 à la demande, ce qui est d'une grande valeur pratique auquel les amis dans le besoin peuvent se référer. it

Introduisez d'abord la fonction de chargement dynamique :

require.ensure([], (require)=>{
  let A = require('./a.js').default;
})

Si vous souhaitez charger dynamiquement un composant de code es6, il n'est pas possible d'exiger directement un composant de style es6, car la compilation générale du langage les outils (tels que babel ), ne prennent pas directement en charge l'exigence d'un composant de style es6.

Ensuite, il existe un moyen de le résoudre : ajoutez une phrase en bas du composant écrite en mode 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 (
      <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；

Parce que dans require.ensure() utilise require() pour introduire les modules, le composant doit donc être exporté en utilisant module.exports

[Recommandations associées]

1 ; 🎜>

Recommandation spéciale : Téléchargement de la version "php Programmer Toolbox" V0.1

Tutoriel vidéo en ligne js gratuit

3.

php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!