首先介紹下動態加載函數:
require.ensure([], (require)=>{ let A = require('./a.js').default;})如果想要動態加載出es6代碼組件,直接require一個es6風格的組件是不行的,因為一般的語言編譯工具(如babel),不支持直接require一個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 ( <div> <span onClick={this.doSomething} > 點擊后,按需加載模塊~ </span> {this.state.currentComponent} </div> ) }}app2
import React,{Component} from 'react';export default class Hello extends Component { render () { return ( <div>你好,祝你幸福,再見~</div> ) }}module.exports= Hello; 因為在require.ensure()中使用了require()引入模塊,所以組件后必須用module.exports導出組件;
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答