この記事では、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.exports
Export theComponent;
[関連する推奨事項] ]
1. 特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード
2. 3.以上がES6 コードコンポーネントを動的にロードする方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。