反应过渡组 - 不要动画孩子

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>

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

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

...如果是“任务”、“活动”或“笔记”，我只是将密钥设置为 'noanimate'（即一些通用字符串，因此开关不会注意到）：

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

现在，从/project 到/project/tasks 的重定向在从'project' 到'noanimate' 时进行了双重转换，我不确定我是否打算编写一些更糟糕的字符串操作获取最后一个或倒数第二个术语，具体取决于它是 '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>

它基本上会抛出这个“开关”内的所有路由，并使用matchPath 函数识别某些路由是否正确匹配。