ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 コードコンポーネントを動的にロードする方法のチュートリアル

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

零下一度
リリース: 2017-05-13 10:48:11
オリジナル
2220 人が閲覧しました

この記事では、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 &#39;react&#39;;
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート