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

Question

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

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

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

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

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

提前感谢您的反应！

Answer 1

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

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