4

我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;
    }

现在，从to的重定向在从/projectto 时/project/tasks进行双重转换，我不确定我是否打算编写一些更糟糕的字符串操作只是为了获得最后一个或倒数第二个术语，这取决于它是否'tasks'/'activity'/'notes' 或任何其他字符串。'project''noanimate'

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

4

1 回答 1

0

我遇到了同样的问题，所以我编写了自己的解决方案：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函数识别某些路由是否正确匹配。

于 2017-08-17T13:30:59.413 回答