动画单个DOM元素而不重新渲染组件

animate single DOM element without re-rendering component

本文关键字：新渲染 组件 单个 DOM 元素 动画      更新时间：2023-09-26

我有以下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或任何其他值。它甚至不需要独一无二。你只需要在组件更新时用任何值来更新它。

本博客更深入地讨论了这个主题。

相关文章：