javascript - react-router:将prop传递到react-router ^ 2.0.0中的嵌套路由组件的最佳方法？

前体：

我正在重构两个组件，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>

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

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

最佳答案

在React Router的v2 / 3中，您将不得不使用cloneElement重新渲染具有所需道具的this.props.children元素。基本上，您的代码将如下所示：

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

React Router的文档包括此passing props to children示例应用程序，该应用程序具有相同的作用。