javascript - react-spring:过渡组件问题
问题描述
我正在使用 react-spring,Transition 渲染道具组件。
我面临一个边缘情况,即使在通过 setState() 更新项目后,组件中使用的项目也会显示旧值并向其附加新值。
我期待一个项目应该重新呈现转换组件中的项目列表的行为。
知道我可能会错过什么吗?
<ul>
<Transition
items={randomFeeds}
// keys={randomFeeds.map(item => item.id)}
keys={randomFeeds => randomFeeds.id}
from={{ transform: 'translate3d(0, -40px, 0)', opacity: 0 }}
enter={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
update={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
reset={true}
unique={true}
>
{item => props => (
<li style={props} key={item.id + item.riskCategoryId + item.riskCategory}>
<RimeCard
key={item.id + item.riskCategoryId + item.riskCategory}
title={item.title}
categoryId={item.riskCategoryId}
category={item.riskCategory}
link={item.link}
isTimeline={true}
date={item.publishDateString}
/>
</li>
)}
</Transition>
</ul>
解决方案
如果您想要更新项目,请确保您的 li 组件的键在更新之间不会更改。所以不要使用 key:key={item.id + item.riskCategoryId + item.riskCategory}
只需使用key={item.id}
您可能还想将 leave 属性添加到您的转换中,例如:leave={{ transform: 'translate3d(0, 40px, 0)', opacity: 0 }}
如果这解决了您的问题,我不确定是否需要重新设置和唯一。
推荐阅读
- python - 类型错误:参数 1 必须是字符串或 unicode 对象:改为获取元组
- robotframework-ide - 无法运行程序“robot”(在目录“/Users/Seema/Robot/freecrm_repo”中):错误=2,没有这样的文件或目录
- stanza - 如果存在元组中的元素,如何找到它的索引?
- python - 在 Python 中解析凌乱的 XML
- c++ - 禁用定时器时出现硬故障?
- unit-testing - 如何对 registry.gitlab.com 中的镜像进行单元测试和部署到自托管 microk8s
- java - Firebase 管理员 - Gradle - Fat Jar - 无法正常工作
- python - 合理的项目结构
- android - 传递数据总是返回 0
- c# - 如何在 Rx.NET 中组合两个不同的 GroupedStreams?