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

......以及它的任务＆＃39;，＆＃39;活动＆＃39;或者＆＃39;注意，我只是将密钥设置为'noanimate'（即一些通用字符串，以便交换机不会注意到）：

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

现在，从/project到/project/tasks的重定向从'project'到'noanimate'进行了双重转换，我不确定我是否＃＆＃ 39; m意味着写一些更糟糕的字符串操作只是为了得到最后一个或倒数第二个词，取决于它的任务＆＃39; /＆＃39;活动＆＃39; /＆＃39;笔记＆＃39;或任何其他字符串。

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

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>

它基本上会把所有路线扔进这个＆＃34; Switch＆＃34;并使用matchPath函数识别某条路线是否正确匹配。

反应过渡组 - 不要让孩子们生气

1 个答案: