React-router：道具如何传递给子组件？

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

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

Answer 1

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

我认为答案有两个部分：你能做这个吗，你应该做这个

我相信您绝对有可能按照您的建议进行操作。如果查看 View1 中的参数，您会发现当 url 为 country/1 时，参数为 { countryId: "1" }，但当 url 为 country/1/city/2，参数是{ countryId: "1", cityId: "2" }。因此，基于此，View1 可以看到 cityId 参数并决定将额外的属性传递给它的 child，例如：

// 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 直接了解其 children、View4 中的 one 的工作原理，您可以耦合两个视图。

如果您真的很关心多次遍历城市的性能影响，可能值得提供一个 ID-indexable 数据结构，View4 可以使用它来查找直接城市（例如 var city = this.props.whatever[this.props.params.cityId]）。

退一步说，我个人认为 Bill 在 the answer you linked to 中描述的 "get all the state and pass it down as props" 在依赖路由的应用程序中可能会出现一些问题。我认为通过 <Route handler={...} /> 传递给路由器的每个视图都是一个 view-controller——可以说是一个微型独立应用程序。正如 Bill 提到的那样，这样做可以更好地封装 route/route 处理程序正在处理的域，而且我认为这不会使调试变得更加困难，因为路由准确地声明了哪个视图充当top-level view-controller 对于任何给定的 URL （因此，如果某些数据看起来有误，您只需立即转到当前路线的 view-controller）。

如果您使用一个很好的组合策略将您的路由处理程序连接到通量存储（请参阅 this Fluxxor issue as an example 处的代码），它会使数据如何从存储进入组件变得更加清晰。

React-router：道具如何传递给子组件？

React-router: How can props be passed down to child components?

reactjs

react-router