使用React创建可扩展的体系结构

Question

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

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

现在，我们希望使用我们的CMS的开发人员可以通过

扩展Web应用程序

1）使用＆＃34; slot-fill＆＃34;将其他部分注入UI。方法

2）可能甚至覆盖现有部分在同一个地方呈现不同的组件。

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

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

Answer 1

单人水疗中心有一些不错的选择可以实现这一目标。 请查看是否对您有帮助。

Microfrontends

Parcels

Answer 2

我面临着同样的问题，我需要一个插件中的组件与另一个具有钩子系统的插件中的组件进行交互。我用相同的方法创建了一个小型Codesanbox，以适应您的需求。

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

Here is ademo

Answer 3

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

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