reactjs – 使用ReactCSSTransitionGroup和React Router可以实现

我在CodePen上写了一个proof of concept. ReactCSSTransitionGroup有一些问题,其中一个在this discussion on Google Groups中提到过.有人说：

You need to keep the ReactCSSTransitionGroup around and add/remove its contents.

所以,基本上,如果你有一个可以为其子项设置动画的组件,则需要将子项包装在ReactCSSTransitionGroup中.这是基于我的笔的一些伪代码：

假设您的路由器设置如下所示：

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/repos" component={Repos}>
      <Route path="/repos/:userName/:repoName" component={Repo}/>
    </Route>
    <Route path="/about" component={About}/>
  </Route>
</Router>

我想为< App>的子组件设置动画.这是它的样子：

function App(props) {
  return (
    <div>
      <h1>App</h1>
      <nav>
        <ul>
          <li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
      </nav>
      <ReactCSSTransitionGroup>
        {React.cloneElement(props.children,{
          key: getKey(props.location.pathname)
        })}
      </ReactCSSTransitionGroup>
    </div>
  );
}

请注意,您需要在子组件外部具有ReactCSSTransitionGroup.此外,每个元素都需要一个唯一键,以便ReactCSSTransitionGroup可以跟踪它们.路径名通常是一个很好的候选人.在我的特定用例中,我使用了一个函数来获取路径名的某个前缀,因此如果我在repos之间导航,则不会发生此级别的转换.你会明白我的意思.

我可以在< Repos>中做类似的事情.零件：

function Repos(props) {
  return (
    <div>
      <h2>Repos</h2>
      <ul>
        <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
        <li><NavLink to="/repos/facebook/react">React</NavLink></li>
      </ul>
      <ReactCSSTransitionGroup>
        {props.children ?
          React.cloneElement(props.children,{
            key: props.location.pathname
          }) :
          null}
      </ReactCSSTransitionGroup>
    </div>
  );
}

这里的想法相似.这次我使用了完整的路径名,因为在这个级别,我确实希望在个人回购之间进行转换.

我还没有在一个大型应用程序上尝试这个,所以我会推荐给有经验的人.但是,正如我先前所说,它至少应该是可能的.您应该能够编写简单的动画来获得复杂的动画.