在多个商店中将可重用组件与ReactJ和Flux一起使用

Question

在我公司，我们使用ReactJs开始了我们的第一个项目。 因为最终这可能会发展成为一个大型系统，所以我们决定使用Flux来使事情井井有条。 尽管有很多示例，但它们大多不基于复杂系统中的用法。

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

所以我有一个React组件，应该监听商店的change事件。 但是，此组件本身不知道要听哪个商店，因为我可以有一个发票商店，但也可以有另一个应显示客户信息的商店。

我发现此问题为您提供了有关如何创建可重用组件的信息，但并未提供有关如何在多个商店中使用组件的提示。

我考虑的一件事是将存储用作参数传递给可重用组件。 这是明智的做法吗？

预先感谢您的反应！

Answer 1

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

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