在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 想把頭部的幾個(gè)import改成按需加載,請問怎么修改?

想把頭部的幾個(gè)import改成按需加載,請問怎么修改?

import './style/main.css';

import React from 'react';
import DashLeft from './component/Left';
import DashCenter from './component/Center';
import Right from './component/Right';


class DisplayScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:'',
            currentComponent:null
        }
    }
    
    handleKeyDown(event){
        // 將停止事件的傳播
        event.stopPropagation();
        // 阻止元素發(fā)生默認(rèn)的行為
        event.preventDefault();
        //console.log('點(diǎn)擊鍵盤事件');
    }


    promptWarm = () => {
        require.ensure(['../../components/warmDialog'], (require) => {
            const Message = require('../../components/warmDialog');
            this.setState({
                currentComponent:<Message />
            })
        },'promptWarm')
    }

    componentDidMount() {
        let this_ = this;
        let date = '';

       if(ENV['displayScreen'].topic) {
           let dateWS = '';
               Util.ws(ENV['displayScreen'].topic, ENV['displayScreen'].interval, returnData=> {
               dateWS = returnData;
               this.setState({data:dateWS})
           });
       }
       else
       {

           import('../../../../public/mockJson/kim-001/kim-001.json').then(data=>{
            //import('../../../../public/mockJson/kim-001/kim-001.json').then(data=>{
                this.setState({data:data})
            });

       }



    }
    render() {

        return (

            <div id="appDash">
                <span onClick={this.promptWarm} >
                    按需加載模塊
                </span>
                {this.state.currentComponent}
                {
                    this.state.data?
                        <div >
                            <DashLeft  data={this.state.data}/>

                            <DashCenter data={this.state.data}/>

                            <Right data={this.state.data}/>
                        </div>:''
                }
            </div>


        );
    }
}

export default DisplayScreen;
回答
編輯回答
爆扎

使用 https://github.com/ctrlplusb/...

以DashLeft為例:
上邊的這個(gè)js改為:

import './style/main.css';

import React from 'react';
import { asyncComponent } from 'react-async-component';
import DashCenter from './component/Center';
import Right from './component/Right';

const AsyncDashLeft = asyncComponent({
  resolve: () => import('./component/Left'),
  LoadingComponent: () => <div>載入中...</div>
});


class DisplayScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:'',
            currentComponent:null
        }
    }
    
    handleKeyDown(event){
        // 將停止事件的傳播
        event.stopPropagation();
        // 阻止元素發(fā)生默認(rèn)的行為
        event.preventDefault();
        //console.log('點(diǎn)擊鍵盤事件');
    }


    promptWarm = () => {
        require.ensure(['../../components/warmDialog'], (require) => {
            const Message = require('../../components/warmDialog');
            this.setState({
                currentComponent:<Message />
            })
        },'promptWarm')
    }

    componentDidMount() {
        let this_ = this;
        let date = '';

       if(ENV['displayScreen'].topic) {
           let dateWS = '';
               Util.ws(ENV['displayScreen'].topic, ENV['displayScreen'].interval, returnData=> {
               dateWS = returnData;
               this.setState({data:dateWS})
           });
       }
       else
       {

           import('../../../../public/mockJson/kim-001/kim-001.json').then(data=>{
            //import('../../../../public/mockJson/kim-001/kim-001.json').then(data=>{
                this.setState({data:data})
            });

       }



    }
    render() {

        return (

            <div id="appDash">
                <span onClick={this.promptWarm} >
                    按需加載模塊
                </span>
                {this.state.currentComponent}
                {
                    this.state.data?
                        <div >
                            <AsyncDashLeft  data={this.state.data}/>

                            <DashCenter data={this.state.data}/>

                            <Right data={this.state.data}/>
                        </div>:''
                }
            </div>


        );
    }
}

export default DisplayScreen;
2018年3月21日 04:12