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

Question

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

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

现在,我们希望使用我们的CMS来扩展Web应用程序的开发人员

1)使用"槽填充"方法将其他部分注入UI

2)可能甚至覆盖现有部分,在同一个地方渲染不同的组件.

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

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

Answer 1

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

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

这是演示