如何使用共享组件组织两个 React 项目？

Question

我有两个 React 项目。它们共享大部分组件（在某些道具上略有不同）。此外，他们都使用的 Redux 也将共享一个相似的数据模型（95% 相同），并且在一些 reducer 操作上有所不同（一个有，另一个没有）。

它们的前端页面/容器由行为相似的组件组成。我想让两个项目之间共享公共组件，我可以传入不同的道具来让它们以不同的方式呈现。

理想情况下，这两个项目应该生成两个不同的工件，但将它们放在一个存储库中似乎更好。我不知道应该如何组织我的项目。

Lerna 应该可以工作，但是对于我的场景来说会不会太复杂？实际上，在大多数情况下，组件实现和背后的处理逻辑都是相似的。

Answer 1

一种解决方案是维护 3 个不同的项目：一个用于每个现有项目，一个用于共享组件的单独“库”。您可以为每个项目在其自己的子目录中创建 3 个单独的 git 存储库或一个存储库。使用 3 个单独的 git 存储库，您可以发布库项目，以便您可以使用 npm 安装它。如果您希望共享您的库，这可以是公共 NPM 注册表，也可以是私有注册表。