小编jch*_*chn的帖子

过去几周我一直在使用React开发应用程序.到目前为止一切正常,但现在我想添加一些过渡.这些转换比我设法找到的任何示例都复杂一些.

我有2页,概述和详细页面,我想在它之间转换.

我正在使用react-router来管理我的路由:

<Route path='/' component={CoreLayout}>

  <Route path=':pageSlug' component={Overview} />
  <Route path=':pageSlug/:detailSlug' component={DetailView} />

</Route>

概述如下所示:

Detailview看起来像这样:

转换的想法是您单击概述的其中一个元素.单击此元素将移动到detailView上应该具有的位置.过渡应该通过路线改变(我认为)来启动,并且也应该能够反过来发生.

我已经尝试过使用ReactTransitionGroupLayout,它有一个渲染方法,如下所示:

render () {
    return (
        <div className='layout'>
            <ReactTransitionGroup>
                React.cloneElement(this.props.children, { key: this.props.location.pathname })
            </ReactTransitionGroup>
        </div>
    )
}

这将使子组件能够接收特殊的生命周期钩子.但是我想在这些钩子中以某种方式访问​​子组件,并且仍然以React方式继续操作.

有人能指出我正确的方向,以便采取下一步措施吗？或者也许请指出一个我可能错过某个地方的例子？在之前的项目中,我使用Ember和液体火来获得这些过渡,React可能有类似的东西吗？

我正在使用react/react-redux/react-router/react-router-redux.