Question

我有以下反应成分：

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制作动画图像，该图像可以很好地处理组件＆＃39;初始负荷。但是，当使用新数据集/图像更新组件时，动画不起作用。

我该如何使这项工作？

Answer 1

当前不支持动画更新的内容。目前，ReactCSSTransitionGroup只能动画添加或删除的组件。

然而，有可能让反应认为某个组件已被移除或添加。 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或任何其他值。它甚至不需要是唯一的。您只需要在组件更新时使用任何值更新它。

此blog更深入地介绍了此主题。

reactjs - 在不重新渲染组件的情况下为单个DOM元素设置动画

1 个答案: