使用TypeScript,React,React-Router在组件之间传递数据

问题描述 投票:0回答:0

我正在使用打字稿(v1.8.10),react(v15.0.2)和react-router(v2.4.0)创建一个大型单页应用程序,并且我试图找到在组件之间传递数据的最佳方法以下类型的方案。 我看到了其他一些相似的问题,但并不完全相同,尤其是考虑到TypeScript提供的类型安全性时,我想利用。

可以说我有一个包含以下组件的汽车查看应用程序:ComparisonComponent,DetailsComponent和SelectComponent。

DetailsComponent将显示汽车模型的详细信息,并具有一个“选择汽车”按钮,该按钮将显示SelectComponent。 一旦用户在SelectComponent中选择了一辆汽车,该汽车的详细信息应显示在DetailsComponent中。

ComparisonComponent将比较两个汽车模型,并具有2个单独的“选择汽车”按钮(例如,按钮A和按钮B)。 当用户单击按钮A时,应该显示SelectComponent。 一旦用户在SelectComponent中选择了一辆汽车,Car A应该显示在ComparisonComponent中。 同样,如果用户单击按钮B,在SelectComponent中选择了一辆汽车,则应该在CompareComponent中显示CarB。

因此,我设想具有以下路线:

  • “ /细节”-> DetailsComponent
  • “ /详细信息/选择”-> SelectComponent
  • “ /比较”->比较组件
  • “ /比较/选择”-> SelectComponent

因此,我的问题是使用react和react-router使SelectComponent返回所选汽车的正确方法是什么? 由于SelectComponent应该在其他组件之间共享,因此,一旦用户完成选择汽车的操作,CompareComponent如何知道选择的是Car A还是Car B? 由于SelectComponent既不是DetailsComponent也不是CompareComponent的子级,所以我认为我无法通过prop从DetailsComponent或CompareComponent传递状态。 那么,如何使用React Router在这些不同的路由之间传递数据?

处理此类情况的正确通量方法是什么? 我将创建一个详细信息存储区和一个比较存储区以在用户导航时跟踪特定于组件的数据吗? 当不再使用特定于UI的数据时,这似乎会导致在商店中保留大量特定于UI的数据。 在我看来,这将浪费大量内存,尤其是对于大型单页应用程序而言,最终将拥有100多个路由。 如果用户退出并重新输入DetailsComponent或CompareComponent,如何避免显示过期数据?

感谢您提供的任何帮助。

reactjs typescript react-router flux reactjs-flux
© www.soinside.com 2019 - 2024. All rights reserved.