ES6 コードコンポーネントを動的にロードする方法のチュートリアル

この記事では、require.ensure()を使用してES6コンポーネントをオンデマンドでロードするReactの詳細な説明を主に紹介します。これは、必要な友人は参照してください

まず、動的ロード関数を紹介します。 :

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

es6 コードコンポーネントを動的にロードしたい場合、es6 スタイルコンポーネントを直接要求することはできません。これは、一般的な言語コンパイルツール (babel など) が es6 スタイルコンポーネントの直接要求をサポートしていないためです。

それから、それを解決する方法があります: 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；

Because in require.ensure()中使用了require()引入模块，所以组件后必须用module.exportsExport theComponent;

[関連する推奨事項] ]

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード

2.

無料のjsオンラインビデオチュートリアル

3.

php.cn JavaScript ビデオチュートリアル

以上がES6 コードコンポーネントを動的にロードする方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。