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

鍍金池/ 問(wèn)答/HTML5  HTML/ react-router4按需加載顯示loading

react-router4按需加載顯示loading

react-router4配置了按需加載，現(xiàn)在網(wǎng)絡(luò)不好情況下分割的js還沒(méi)請(qǐng)求回來(lái)頁(yè)面是空白的，怎么配置分割的js還沒(méi)有請(qǐng)求回來(lái)之前頁(yè)面顯示一個(gè)loading動(dòng)畫(huà)，等到對(duì)應(yīng)的分割的js請(qǐng)求回來(lái)了之后隱藏掉loading顯示頁(yè)面？

回答
編輯回答
選擇

react-loadable我在用這個(gè)

2017年7月5日 22:00
編輯回答
陌璃

不知道你怎么實(shí)現(xiàn)的。
就我的認(rèn)識(shí)中，按需加載時(shí)這樣實(shí)現(xiàn)的。
引入一個(gè)控件(控件留一個(gè)開(kāi)關(guān)) -> 當(dāng)調(diào)用的時(shí)候，打開(kāi)這個(gè)開(kāi)關(guān)

這是一種實(shí)現(xiàn)

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;
      // 可以在這里加上loading
      //return C ? <C {...this.props} /> : <Loading>;
      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}
2018年4月23日 08:59
編輯回答
筱饞貓

是不是這個(gè)

https://reacttraining.com/rea...
圖片描述

2018年1月14日 03:10