[英]Using reusable components with ReactJs and Flux with multiple stores
In my company, we started our first project with ReactJs. 在我公司,我们使用ReactJs开始了我们的第一个项目。 Because in the end this might grow into a large system, we decided to use Flux to keep things organized. 因为最终这可能会发展成为一个大型系统,所以我们决定使用Flux来使事情井井有条。 Although there are quite some examples, they mostly are not based on usage in a complex system. 尽管有很多示例,但它们大多不基于复杂系统中的用法。
One of the things that we would like to realize is a UI that makes use of widget-like components. 我们希望实现的一件事是使用类似于小部件的组件的UI。 For example, we have a component that displays information of a customer. 例如,我们有一个显示客户信息的组件。 This widget will be used on a tab-page with info of an invoice, but also on another tab-page with a customer card in the same browser window. 此小部件将在带有发票信息的选项卡页面上使用,也将在同一浏览器窗口中的带有客户卡的另一个选项卡页面上使用。 And there will be some other components in which this widget will be used. 还将有其他一些组件将使用此小部件。
So I have a React component that should listen to a change event of a store. 所以我有一个React组件,应该监听商店的change事件。 However this component itself does not know what store to listen to, because I can have an invoice store, but also another store that has customer info that should be displayed. 但是,此组件本身不知道要听哪个商店,因为我可以有一个发票商店,但也可以有另一个应显示客户信息的商店。
I found this question that gives some info on how to create a re-usable component, but it does not give some tips on how to use a component with multiple stores. 我发现此问题为您提供了有关如何创建可重用组件的信息,但并未提供有关如何在多个商店中使用组件的提示。
One thing that I consider is to pass the store to be used as a parameter into the re-usable component. 我考虑的一件事是将存储用作参数传递给可重用组件。 Would this be a wise thing to do? 这是明智的做法吗?
Thanks in advance for your reactions! 预先感谢您的反应!
One way to go would be to handle all the data retrieval logic in a parent component. 一种方法是处理父组件中的所有数据检索逻辑。 In that model, your CustomerCard
component doesn't need to know how to retrieve its data, but expect it to be passed as props instead. 在该模型中,您的CustomerCard
组件不需要知道如何检索其数据,而是希望将其作为道具传递。 This is a win for reusability since your CustomerCard
component isn't tied to a specific data retrieval process anymore. 这是可重用性的胜利,因为CustomerCard
组件不再与特定的数据检索过程相关联。
In your case, you could create one container component per store, and each one of them would return a <CustomerCard customerInfo={...} />
element in their render()
method. 在您的情况下,您可以为每个商店创建一个容器组件,并且每个容器组件将在其render()
方法中返回<CustomerCard customerInfo={...} />
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.