React 实现一段文字按单个字依次显示

// 组件
import React, { useState, useEffect } from 'react';

const TypewriterText: React.FC<{ textToDisplay: string }> = ({ textToDisplay }) => {
  const [displayedText, setDisplayedText] = useState('|');

  useEffect(() => {
    let currentIndex: number = 0;
    const interval = setInterval(() => {
      setDisplayedText(textToDisplay.substring(0, currentIndex));
      currentIndex++;
      if (currentIndex > textToDisplay.length) {
        clearInterval(interval);
      }
    }, 20); 
    return () => clearInterval(interval);
  }, [textToDisplay]);

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

export default TypewriterText;

// 引入组件
import TypewriterText from './typewriterText';
<TypewriterText textToDisplay={"这是一段文字描述"} />