将可重复使用的组件与ReactJs和Flux一起用于多个存储

Using reusable components with ReactJs and Flux with multiple stores

本文关键字：一起 Flux 用于存储 ReactJs 组件更新时间：2023-09-26

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

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

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

我发现这个问题提供了一些关于如何创建可重用组件的信息，但它没有提供一些关于如何在多个存储中使用组件的提示。

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

提前感谢您的反应！

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

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