渲染一个动态加载的React组件

问题描述

`这是我的尝试，只需单击一个按钮即可动态加载组件，并显示在页面上。 https://codesandbox.io/s/sweet-haze-knste?file=/src/App.tsx

单击按钮后，我使用下面的代码行动态导入组件。

const importedComponent = React.lazy(() => import("./DynamicallyImportedComponent"));

然后使用

设置状态

this.setState({
      importModule: importedComponent
      // importModule: CommonEditorCallout
    });

但是，这不能正确显示。

当我使用下面的常规导入时，它呈现得很好

import DynamicallyImportedComponent from "./DynamicallyImportedComponent";

这可能是由于在常规导入中我指定了要导入的组件的名称，还是与动态导入本身有关？

解决方法

Docs

然后，应该将懒惰的组件呈现在Suspense组件中，这使我们可以在等待懒惰的组件加载时显示一些后备内容（例如，加载指示符）。

因此，用React.Suspense道具用fallback包装惰性加载的组件将解决该错误。

 <React.Suspense fallback={<div>Loading...</div>}>
   {this.state.showImportedModule && <div>{<ComponentToShow />}</div>}
 </React.Suspense>

请参见example