react-router：将道具传递给 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>

如何将道具传递给 PhotoDetailsModal 组件？在这次重新设计之前，Photos.js 简单地处理了所有的数据收集，并通过一些道具在内部将扩展的照片数据传递给 <PhotoDetailsModal/>。

我知道 Photos.js 我最终会使用 {this.props.children} 渲染 PhotoDetailsModal，我只是想知道如何使用这个新路由 .

完成我从 <Photos/> 到 <PhotoDetailsModal/> 的所有数据传递

Answer 1

使用 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 示例应用程序，它做同样的事情。

react-router：将道具传递给 react-router ^2.0.0 中的嵌套路由组件的最佳方式？

react-router: Best way to pass props to nested route components in react-router ^2.0.0?

javascript

url-routing

parent-child

reactjs

react-router

先行者：