陣營過渡小組 - 不要動畫兒童

Question

我使用react-transition-group動畫中的路由器交換機陣營：

<CSSTransitionGroup transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}> 
     <Switch key={key} location={this.props.location}> 
      <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} /> 
      <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
       <ProjectIndex {...params} slug={this.props.match.params.project_slug} /> 
      )} key={'none'} /> 
     </Switch> 
    </CSSTransitionGroup> 

也有人觸發動畫，只要任何子路由改變。因此，要解決這個問題，我使用this.props.location.pathname獲取路徑，然後使用一些十分難看代碼來獲取最後一段：

pathname = pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0]; 

...如果它的「任務」，「行爲」或「筆記，我只是設置關鍵'noanimate'（即一些通用的字符串，所以交換機不會注意到）：從/project

switch(pathname){ 
     case 'tasks': 
     case 'activity': 
     case 'notes': 
      key = 'noanimate'; 
      break; 
     default: 
      key = pathname; 
      break; 
    } 

現在，重定向到/project/tasks不會隨着從'project'到'noanimate'雙轉換，我不確定我是否打算寫一些更糟糕的字符串操作只是爲了得到最後一個或後一個任期，取決於它是'任務'/'活動'/'筆記'或任何其他字符串。

有沒有更好的解決方案，還是那個......我們是如何做事的？

Answer 1

我有同樣的問題，所以我寫了我自己的解決方案：switch-css-transition-group

安裝後可以通過改寫代碼：

import SwitchCSSTransitionGroup from 'switch-css-transition-group' 

<SwitchCSSTransitionGroup location={this.props.location} transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}> 
    <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} /> 
    <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
     <ProjectIndex {...params} slug={this.props.match.params.project_slug} /> 
    )} key={'none'} /> 
</SwitchCSSTransitionGroup> 

它基本上去拋出這個「開關」，用裏面的所有路由matchPath函數可以識別某些路由是否正確匹配。