zoukankan      html  css  js  c++  java
  • react 路由按需加载

    方法一:
    从右到左,一级一级抛出
     

    方法二:
    (1)router文件夹asyncComponent.jsx创建文件
    (2)填写内容
    (3)router文件夹的index文件引入asyncComponent.jsx

      asyncComponent.jsx文件内容(JS版):

    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});
        }
        render() {
          const C = this.state.component;
          return C ? <C {...this.props} /> : null;
        }
      }
      return AsyncComponent;
    }

    asyncComponent.tsx文件内容(TS版):

    import React, { Component, ComponentType } from 'react';
    function asyncComponent<T>(importComponent: () => Promise<{ default: ComponentType<T> }>) {
      return class extends Component<T> {
        state: { component: ComponentType<T> | null }
        constructor(props: T) {
          super(props);
          this.state = {
            component: null
          }
        }
        async componentDidMount() {
          const { default: component } = await importComponent()
          this.setState(component)
        }
        render() {
          const C = this.state.component;
          return C ? <C {...this.props} /> : null;
        }
      }
    };
    export default asyncComponent
  • 相关阅读:
    Python-函数
    Python-运数符
    Python-条件判断
    Python-变量
    移动端页面布局的那些事儿
    关于ie7下display:inline-block;不支持的解决方案
    SuperSlidev2.1 轮播图片和无缝滚动
    解决xmapp中Apache端口号占用问题
    npm 常用命令详解
    python函数总结
  • 原文地址:https://www.cnblogs.com/konghaowei/p/14138947.html
Copyright © 2011-2022 走看看