具有动态加载的 React 插件架构

【问题标题】：React Plugin Architecture with dynamic loading具有动态加载的 React 插件架构
【发布时间】：2021-09-11 12:50:55
【问题描述】：

我想在客户端站点上构建一个支持插件概念的 SPA。您应该能够将包复制到特定文件夹中，并且服务器应在重新启动后加载此组件。这个插件应该可以在没有任何信息存储在基本程序中的情况下工作。

我需要按名称动态加载组件。我没有所有可能组件的地图。只知道名称如何加载组件？

【问题讨论】：

标签： javascript reactjs typescript dynamic plugins

【解决方案1】：

您可以查看React.lazy。这有助于动态加载您想要的组件，但是您需要将其包装到 Suspense，因为组件不会立即加载。

// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));
<Suspense fallback={<Spinner/>}><SomeComponent/></Suspense>

【讨论】：

嗨，请不要发布仅链接的答案。 1. 链接可能会过期，从而使您的帖子完全无用。 2. 你强迫用户离开这个网站以获得更多信息。链接可以作为补充：尝试引用相关部分。（我知道这个问题并没有给你太多的问题，因为它是如此广泛。所以我不怪你！）查看我所做的编辑。