React 过渡组 - 不要设置动画 children

Question

我正在使用 react-transition-group 在 React 中为路由器开关设置动画：

    <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>

它也会在任何 sub-routes 变化时触发动画。所以，为了解决这个问题，我使用 this.props.location.pathname 获取路径名，然后使用一些非常粗糙的代码来获取最后一段：

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

...如果是 'tasks'、'activity' 或 'notes，我只是将密钥设置为 'noanimate'（即一些通用字符串，因此开关不会通知):

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

现在，从 /project 到 /project/tasks 的重定向在从 'project' 到 'noanimate' 的过程中进行了双重转换，我不确定我是否我的意思是写一些更糟糕的字符串操作只是为了得到最后一个或 second-last 项，这取决于它是 'tasks'/'activity'/'notes' 还是任何其他字符串。

是否有更好的解决方案，或者是……我们应该如何做事？

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>

它基本上把所有路由都扔进这个 "Switch" 并使用 matchPath 函数识别某些路由是否正确匹配。

React 过渡组 - 不要设置动画 children

React transition group - Don't animate children

reactjs

react-router

react-transition-group