使用typescript,react,react-router

时间:2016-05-16 22:09:23

标签: reactjs typescript react-router flux reactjs-flux

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

假设我有一个带有以下组件的汽车查看应用程序:ComparisonComponent,DetailsComponent和SelectComponent。

DetailsComponent将显示汽车模型的详细信息,并且有一个"选择汽车"按钮将调出SelectComponent。一旦用户在SelectComponent中选择汽车,该汽车的详细信息应显示在DetailsComponent中。

比较组件将比较两个车型,并有两个单独的"选择车"按钮(例如,按钮A和按钮B)。当用户单击按钮A时,应显示SelectComponent。一旦用户在SelectComponent中选择汽车,Car A就应该显示在ComparisonComponent中。同样,如果用户点击按钮B,在SelectComponent中选择一辆汽车,那么Car B应该显示在ComparisonComponent中。

所以,我设想有以下路线:

  • " /细节" - > DetailsComponent
  • " /信息/选择" - > SelectComponent
  • " /比较" - > ComparisonComponent
  • " /比较/选择" - > SelectComponent

所以,我的问题是使用react和react-router以使SelectComponent传回选定的汽车的正确方法是什么?由于SelectComponent应该在其他组件之间共享,一旦用户选择了汽车,CompareComponent如何知道它是Car A还是Car B?由于SelectComponent不是DetailsComponent或CompareComponent的子代,我不认为我可以通过props从DetailsComponent或CompareComponent传递状态。那么,我如何使用反应路由器在这些不同的路由之间传递数据?

处理此类情景的适当通量方式是什么?我会创建一个详细信息存储和比较存储来跟踪用户导航时的组件特定数据吗?当不再使用UI特定数据时,似乎会导致在商店中保留大量UI特定数据。在我看来,它会浪费大量内存,特别是对于一个最终会有100多条路线的大型单页应用程序。如果用户退出并重新进入DetailsComponent或CompareComponent,我如何防止显示陈旧数据?

感谢您提供的任何帮助。

0 个答案:

没有答案