reactjs - React 过渡组 - 不要为 child 设置动画

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'，我不确定我是否应该编写一些更糟糕的字符串操作来获取最后一个或倒数第二个术语，具体取决于它是“任务”/“事件”/'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 函数识别某些路由是否正确匹配。