javascript - react-transition-group v2 和 react-router-dom v4。为什么动画会同时改变内部和外部组件的数据?
问题描述
我有一个简单的代码测试台,我们可以在其中看到react-transition-group
.v2 与通过react-router-dom
v4 的路径之间的导航动画异常地工作。
测试台: https ://codesandbox.io/s/oxkw5prm56?from-embed
通常,这段代码只是输出string
当前单击路径的文本,然后将其放在页面正文中。
但是 .v2 中给我的一件奇怪的事情是react-transition-group
,当路径改变并且新文本放置在前一个文本之前消失的那一刻 - 前一个文本字符串将自己的内容替换为新文本的内容。因此,如您所知,在单击任何路径后,我们有两个相似的文本字符串的场景,这是不正确的。
有人知道为什么会这样吗?谢谢
解决方案
这是因为您忘记了新的 Transition API 是什么。在新的 v4 中,它使用对象中的location
道具history
(从 接收import { syncHistoryWithStore } from 'react-router-redux'
)来建议动画应该如何更新组件。
因此,在这种情况下,您的收据通常可以是下一个:
在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>
))
推荐阅读
- mysql - MySQL:在进行 ID 查找时如何避免所有分区扫描(基于年份)?
- php - WooCommerce - 如何让 YITH 交货日期出现在 PDF 发票上?
- reactjs - 如何重用通过 React 和 Redux 改变状态的组件
- python - 如何使用来自 rekognition 图像文本的所需数据
- azure-cli - Azure cli 虚拟机规模集教程因“不允许使用参数‘osProfile’而失败。”?
- loops - 使用循环时的 Ansible 解析(调试)结果
- spring-boot - 带有私有仓库的 Spring Boot Gradle bootBuildImage 任务
- j - 如何在J中将数据数组从宽到长重塑?
- git - VSCode - 选项卡图标颜色反映 git 状态
- r - 如何将变量用于块选项?