react-transition-group v2 和 react-router-dom v4。为什么动画会同时改变内部和外部组件的数据？答案

【问题标题】：react-transition-group v2 and react-router-dom v4. Why animation change the data in both: inner and outer components?react-transition-group v2 和 react-router-dom v4。为什么动画会同时改变内部和外部组件的数据？
【发布时间】：2019-02-21 00:24:04
【问题描述】：

我有一个简单的代码测试台，我们可以在其中看到 react-transition-group .v2 与通过 react-router-dom v4 的路径之间的导航动画异常工作。

测试台： https://codesandbox.io/s/oxkw5prm56?from-embed

通常，这段代码只是输出string和当前点击路径的文本，然后放在页面正文中。

但是react-transition-group.v2 给我的一个奇怪的事情是，当路径改变并且新文本放置在前一个文本之前的那一刻消失了 - 之前的文本字符串替换了自己的内容与新的内容。因此，正如您所了解的，我们在单击任何路径后有两个相似的文本字符串的场景，这是不正确的。

有人知道为什么会这样吗？谢谢

【问题讨论】：

标签： javascript reactjs react-router-v4 react-router-dom react-transition-group

【解决方案1】：

这是因为您忘记了新的 Transition API 是什么。在新的 v4 中，它使用 history 对象（从 import { syncHistoryWithStore } from 'react-router-redux' 接收）中的 location 属性来建议动画应该如何更新组件。

因此，在这种情况下，您的收据通常可以是下一个：

在App 组件中添加location 属性在Switch 部分：

const App = withRouter(({ location }) => (
  <div>
    ....
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        classNames='fade'
        timeout={1000}
      >
        <Switch location={location}> // this string is updated!
          <Route exact path='/' component={Home} />
          <Route exact path='/other' component={Other} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  </div>
))

【讨论】：

哦，这太简单了...非常感谢！