我有一个简单的代码测试台,我们可以在其中看到 react-transition-group
.v2 如何在通过 react-router-dom< 的路径之间导航动画时异常工作
v4.
测试台: https://codesandbox.io/s/oxkw5prm56?from-embed
一般情况下,这段代码只是将当前点击路径的文本输出string
,放在后面的页面body中。
但是 react-transition-group
.v2 给我的一件奇怪的事情是,当路径改变并且新文本放置在前一个文本消失之前时 - 以前的文本字符串用新的内容替换自己的内容。因此,正如您所理解的,我们遇到了在单击任何路径后出现两个相似文本字符串的情况,这是不正确的。
有人知道为什么会这样吗?谢谢
最佳答案
这是因为您忘记了新的 Transition API 是什么。在新的 v4 中,它使用 history
对象中的 location
Prop (从 import { syncHistoryWithStore } from 'react-router-redux'
接收)到建议动画应该如何更新组件。
因此,在这种情况下,通常您的收据可能是下一张:
在 App
组件的 Switch
部分添加 location
属性:
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>
))
关于javascript - react-transition-group v2 和 react-router-dom v4。为什么动画改变: inner and outer components?中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52361615/