reactjs - 使用 React 创建可扩展架构

Question

我的团队正在使用 React、Typescript、TSX 和 Webpack 创建 CMS 的管理面板。管理面板的每个页面都被创建为一个 React 组件，并且每个页面都包含许多其他子组件（每个部分一个）。

CMS 发行版当前包含运行 Web 应用程序所需的捆绑版本的 javascript，但不包含原始 TSX 文件。

现在，我们想让使用我们的 CMS 的开发人员能够通过以下方式扩展 Web 应用程序

1)使用“slot-fill”方法将附加部分注入UI

2) 甚至可能覆盖现有部分，在同一位置呈现不同的组件。

<div>
  <SidebarComponent />
  <Section1Component />
  <Section2Component />
  // How to inject a  possible PluginComponent here?
</div>

从我们迄今为止进行的研究来看，似乎没有“官方”的方法来做到这一点，所以我想知道在这种情况下什么是最好的方法。

score 3 · Accepted Answer

我面临着同样的问题，我需要一个插件中的一个组件来与另一个带有钩子系统的插件中的组件进行交互。我创建了一个小代码框，采用相同的方法适应您的需要。

基本上，该方法是在插件的根目录创建一个injectedComponents.js，指定需要在哪个插件和区域中注入组件。

score 2 · Accepted Answer

为了实现这一目标，single-spa 有一些不错的选择。请看看它是否对你有帮助。

score 0 · Accepted Answer

我迟到了，但只需创建一个具有注册表功能的实用程序类，并将每个组件注册到注册表（只是键值对的字典，其中键是常量，值是组件）。吨

然后，当您在基础应用程序中显示组件时，使用密钥从注册表中获取它。然后，一旦您将整个基础应用程序作为包发布（确保导出实用程序注册表）。用户可以注册一个具有相同名称的组件并覆盖默认组件。

3 回答 3