Question

的前体：

我正在重构两个组件， Photos.js 和 PhotoDetailsModal.js 。最初他们有这样的关系：

<Photos>
   <PhotoDetailsModal/>
</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 ，我只是想知道如何从{传递所有数据传递{1}} <Photos/>使用此新路由。

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：将props传递给react-router ^ 2.0.0中的嵌套路由组件的最佳方法？

的前体：

1 个答案: