我有以下react组件:
return(
<div className="project-page">
<div className="jumbotron">
<div className="container">
<h1>{currentProject.title}</h1>
</div>
</div>
<div className="container ">
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
<div className="project-image-container">
<img src={currentProject.image} alt="Project Image" />
</div>
</ReactCSSTransitionGroup>
.....
我使用ReactCSSTransitionGroup
来动画图像,该图像在组件的初始负载上工作良好。然而,当组件被更新为新的dataset/image时,动画不工作。
我怎样才能使它工作?
react目前不支持更新内容的动画。目前,ReactCSSTransitionGroup
只能激活正在添加或删除的组件。
然而,有可能使react认为组件已被删除或添加。React依赖于key
属性来唯一地标识子组件。
所以你应该可以这样做:
return(
var key = projectId;
<ReactCSSTransitionGroup key={key} transitionName="example" transitionAppear={true}>
<div className="project-image-container">
<img src={currentProject.image} alt="Project Image" />
</div>
</ReactCSSTransitionGroup>
在本例中,必须传递唯一的id
或任何其他值。它甚至不需要独一无二。你只需要在组件更新时用任何值来更新它。
本博客更深入地讨论了这个主题。