使用ReactJs和Flux的可重用组件与多个商店

Question

在我的公司，我们用ReactJs开始了我们的第一个项目。因为最终这可能会变成一个大型系统，所以我们决定使用Flux来保持组织有序。虽然有很多例子，但它们大多不是基于复杂系统的用法。

我们想要实现的一件事是使用类似小部件的组件的UI。例如，我们有一个显示客户信息的组件。此窗口小部件将在带有发票信息的选项卡页面上使用，但也可以在另一个带有客户卡的选项卡页面上的同一浏览器窗口中使用。还有一些其他组件将使用这个小部件。

所以我有一个React组件应该监听商店的更改事件。然而，这个组件本身并不知道要收听哪个商店，因为我可以有一个发票商店，还有另一个商店，其中包含应该显示的客户信息。

我发现this问题提供了有关如何创建可重复使用组件的一些信息，但它没有提供有关如何使用具有多个商店的组件的一些提示。

我考虑的一件事是将商店作为参数传递给可重复使用的组件。这是明智的做法吗？

提前感谢您的反应！

Answer 1

一种方法是处理父组件中的所有数据检索逻辑。在该模型中，您的CustomerCard组件不需要知道如何检索其数据，但希望它作为道具传递。由于您的CustomerCard组件不再依赖于特定的数据检索过程，因此这是可重用性的胜利。

在您的情况下，您可以为每个商店创建一个容器组件，并且每个商店都会在其<CustomerCard customerInfo={...} />方法中返回render()元素。