如何使用react原生动画在一段时间后自动淡出文本

npm install react react-dom

import React, { useState, useEffect } from 'react';

const FadeOutText = ({ text, fadeOutTime }) => {
  const [opacity, setOpacity] = useState(1);

  useEffect(() => {
    const timer = setTimeout(() => {
      setOpacity(0);
    }, fadeOutTime);

    return () => clearTimeout(timer);
  }, [fadeOutTime]);

  return (
    <div style={{ opacity, transition: `opacity ${fadeOutTime}ms ease-in-out` }}>
      {text}
    </div>
  );
};

export default FadeOutText;

import React from 'react';
import FadeOutText from './FadeOutText';

const App = () => {
  return (
    <div>
      <h1>Welcome to my React App!</h1>
      <FadeOutText text="This text will fade out after 3 seconds." fadeOutTime={3000} />
    </div>
  );
};

export default App;