有没有一种方法可以对回退组件应用带有React悬念的淡入/淡出过渡？

npm install react-transition-group

import React, { Suspense } from 'react';
import { CSSTransition } from 'react-transition-group';
import './FadeTransition.css'; // 引入CSS样式

// 假设这是你的回退组件
const FallbackComponent = () => <div>Loading...</div>;

// 这是你想要展示的实际组件
const ActualComponent = React.lazy(() => import('./ActualComponent'));

const FadeTransition = () => (
  <div>
    <CSSTransition
      in={true}
      timeout={300}
      classNames="fade"
      unmountOnExit
    >
      <Suspense fallback={<FallbackComponent />}>
        <ActualComponent />
      </Suspense>
    </CSSTransition>
  </div>
);

export default FadeTransition;

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}