react-transition-group 在 React 18 及以上版本中的兼容性问题

出现问题

在React19中下载react-transition-group（4.4.5），正常导入使用：

出现下述报错：

报错原因

React18开始，已废弃findDOMNode ，而 react-transition-group 的 4.4.5 版本仍然使用了 findDOMNode来获取DOM节点，以便在动画中直接使用这些节点，从而导致报错

那么早期react-transition-group是如何使用findDOMNod的那？

1.获取DOM获取 DOM 节点以应用动画：

2.处理动画的生命周期：

为什么被废弃？
1.React18 引入了Concurrent Mode，允许 React 在后台执行工作，并在必要时中断和恢复渲染。 react-transition-group 与 Concurrent Mode 的工作方式不兼容；

2.React 推荐使用更高级别的抽象（如ref）来处理 DOM 操作，而不是直接使用findDOMNode

解决方法：使用ref

1. 引入useRef

2. 创建一个ref

3. 将ref传递给nodeRef属性

4. 将ref附加到目标 DOM 元素上

import React, { useRef } from 'react';
import { CSSTransition,SwitchTransition } from 'react-transition-group'const MyComponent = () => {const nodeRef = useRef(null); // 创建一个 refreturn (<SwitchTransition mode='in-out'><CSSTransitionnodeRef={nodeRef} key={pictureUrls[currentIndex]}classNames="pic"timeout={200}><img ref={nodeRef} src={pictureUrls[currentIndex]} alt="" /></CSSTransition></SwitchTransition>);
};export default MyComponent;