React-router：如何将 props 传递给子组件？

Question

我不确定我是否以正确的方式处理这个问题，所以先介绍一下背景：

假设我在每个国家/地区都有国家和城市，我将从最顶层路线 (view1) 中的两个商店 CountryStore 和 CityStore 中获取这些数据。我正在尝试设置 react-router 以便我有这样的嵌套路由：

<Route name="app" path="/" handler={App}>
   <DefaultRoute name="view2" handler={View2}/>
   <Route name="view1" path='country/:countryId'  handler={View1}>
        <DefaultRoute name="view3" handler={View3}/>
        <Route name="view4" path='city/:cityId'  handler={View4}/>
        < More nested routes /> 
   </Route>
</Route>

所以从我一直 reading up 开始，我已经明白我应该在我的顶视图1中有状态并将所有内容作为道具传递给 view3、view4 和任何其他。

所以这里有一个fiddle，我通过在 view1 中使用路由处理程序传递道具来使事情正常进行，并且我从链接中传递参数，每个视图可以根据这些参数过滤掉他们需要的东西。但是我想知道是否有一种更聪明的方法可以通过以某种方式传递每个链接所需的道具来做到这一点。这意味着如果在我的城市列表中我已经遍历了所有城市对象，我可以通过城市链接以某种方式将当前城市作为道具传递下去，这样城市视图就不需要每次都过滤掉它的城市？

我希望问题足够清楚，感谢您的任何建议！

Answer 1

您的问题有点令人困惑（可能是因为非常通用的变量/视图名称），但我想我明白您的意思了。

我认为答案有两个部分：你能做到这一点，你应该这样做。

我相信你绝对有可能可以按照你的建议去做。如果查看View1 中的参数，可以看到当url 为country/1 时，参数为{ countryId: "1" }，但当url 为country/1/city/2 时，参数为{ countryId: "1", cityId: "2" }。因此，基于此，View1 可以看到 cityId 参数并决定将附加属性传递给其子项，例如：

// In View1
var props = {
  country: testCountry
}

if (this.props.params.cityId) {
  props.city = (get the city object here);
}

return (
  <div>View 1 wrapper: countryId {countryId}
    <RouteHandler {...this.props} {...props}/>
  </div>
);

但是，我不确定您是否应该。这打破了 React Router 提供的封装；您通过让View1 直接了解其子级View4 的一个 是如何工作的，从而耦合了两个视图。

如果您真的担心多次迭代城市对性能的影响，可能值得提供一个 ID 可索引的数据结构，View4 可以使用它来直接查找城市（例如 @987654334 @)。

退后一步，我个人认为 Bill 在 the answer you linked to 中描述的“获取所有状态并将其作为道具传递”可能会在依赖路由的应用程序中出现一些问题。我认为通过<Route handler={...} /> 传递给路由器的每个视图都是一个视图控制器——可以说是一个微型独立应用程序。正如比尔提到的那样，这样做可以更好地封装路由/路由处理程序正在处理的域，并且我认为它不会使调试变得更加困难，因为路由准确地声明了哪个视图充当顶部-任何给定 URL 的级别视图控制器（因此，如果某些数据看起来不正确，您只需立即转到当前路由的视图控制器）。

如果您使用良好的组合策略将您的路由处理程序连接到通量存储（请参阅this Fluxxor issue as an example 处的代码），它会更清楚数据如何从存储获取到组件。