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 imgRef = useRef(null); // 创建一个 ref

  return (
    <SwitchTransition mode='in-out'>
      <CSSTransition
      nodeRef={imgRef} 
      key={pictureUrls[currentIndex]}
      classNames="pic"
      timeout={200}
      >
      <img ref={imgRef} src={pictureUrls[currentIndex]} alt="" />
      </CSSTransition>
    </SwitchTransition>
  );
};

export default MyComponent;