使用可加载组件的 React.lazy 模式

Question

我有以下情况，我事先不知道要加载哪个组件。使用React.lazy的解决方案如下

import React, { lazy, Suspense } from "react";

export default class CallingLazyComponents extends React.Component {
  render() {

    var ComponentToLazyLoad = null;

    if(this.props.name == "A") { 
      ComponentToLazyLoad = lazy(() => import("./AComponent"));
    } else if(this.props.name == "B") {
      ComponentToLazyLoad = lazy(() => import("./BComponent"));
    }
    return (
        <div>
            <h1>This is the Base User: {this.state.name}</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <ComponentToLazyLoad />
            </Suspense>
        </div>
    )
  }
}

我怎样才能使用Loadable Components 达到同样的效果

Answer 1

我认为解决您的问题的最佳方法是继续使用 React.lazy，就像 recommended by the author of loadable-components 一样，因为“它不再维护，并且与 Webpack v4+ 和 Babel v7+ 不兼容”