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

Question

我不确定我是否以正确的方式处理这个问题，所以首先介绍一些背景知识:

假设我要从最顶层路线 (view1) 中的两个商店 CountryStore 和 CityStore 获取每个国家/地区的国家/地区和城市。我正在尝试设置 react 路由器，以便我有像这样的嵌套路由:

<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继续，我明白我应该在我的顶部 View 1 中拥有状态，并将所有内容作为 Prop 传递给 View 3、 View 4 和任何其他 View 。

所以这是一个 fiddle我通过在 view1 中使用路由处理程序传递 props 来完成工作，并且从链接中传递参数，每个 View 都可以根据这些参数过滤出它们需要的内容。但我想知道是否有一种更聪明的方法可以通过以某种方式传递每个链接所需的 Prop 来做到这一点。这意味着如果在我的城市列表中我已经迭代了所有城市对象，我可以通过城市链接以某种方式将当前城市作为 Prop 传递下去，这样城市 View 就不需要每次都过滤掉它的城市？

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

Answer 1

你的问题有点令人困惑(也许是因为非常通用的变量/ View 名称)，但我想我明白你得到了什么。

我认为答案有两个部分:你能这样做吗？你应该这样做吗？

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

// 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 来耦合两个 View 关于其子元素一个的直接知识，View4 ，有效。

如果您确实担心多次迭代城市对性能的影响，那么提供一个可 ID 索引的数据结构可能是值得的，View4可以用来直接查找城市(例如 var city = this.props.whatever[this.props.params.cityId] )。

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

如果您使用良好的组合策略将路由处理程序连接到通量存储(请参阅 this Fluxxor issue as an example 中的代码)，则可以更清楚地了解数据如何从存储获取到组件中。