实现文字逐步打印效果

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

const TypingAnimation = ({ text, delay }) => {
  const [displayText, setDisplayText] = useState("");

  useEffect(() => {
    let currentIndex = 0;
    let interval;

    const startTyping = () => {
      interval = setInterval(() => {
        if (currentIndex < text.length) {
          setDisplayText((prevText) => prevText + text[currentIndex]);
          currentIndex++;
        } else {
          clearInterval(interval);
        }
      }, 50);
    };

    const timeout = setTimeout(startTyping, delay); // 延时启动动画

    return () => {
      clearTimeout(timeout);
      clearInterval(interval);
    };
  }, [text, delay]);

  return <span>{displayText}</span>;
};

export default TypingAnimation;

在父文件中引入，text是需要传入的文字, delay是延时多长时间。