javascript - React-Router:将 props 传递给 React-Router ^2.0.0 中的嵌套路由组件的最佳方法？

Question

前体:

我正在重构两个组件:Photos.js 和PhotoDetailsModal.js。原来他们的关系是这样的:

<Photos>
   <PhotoDetailsModal/>
</Photos>

我的路线“/photos”如下所示，Photos.js只是通过状态和一点数据收集在内部控制PhotoDetailsModal的渲染:

<Route path="photos" component={Photos}/>

如果我想解耦这两个组件并创建这样的路由:

<Route path="photos" component={Photos}>
  <Route path=":photoId" component={PhotoDetailsModal}>
  </Route>
</Route>

如何将 Prop 传递到 PhotoDetailsModal 组件中？在此重新设计之前，Photos.js 只是处理所有数据收集，并将扩展的照片数据传递到 <PhotoDetailsModal/>内部通过一些 Prop 。

我确实知道在 Photos.js 中我最终会使用 {this.props.children}渲染PhotoDetailsModal，我只想知道如何从 <Photos/> 进行所有数据传递至<PhotoDetailsModal/>使用这个新路由。

Answer 1

使用 React Router v2/3，您必须使用 cloneElement 来使用所需的 props 重新渲染 this.props.children 元素。基本上，您的代码将如下所示:

render() {
  const { children } = this.props
  return (
    <div>
      { children && React.cloneElement(children, { other: 'foo' }) }
    </div>
  )
}

React Router 的文档包括这个 passing props to children示例应用程序执行相同的操作。