打字机效果

简单的打字机组件效果

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

const Typewriter = ({ text, delay }) => {
  const [displayText, setDisplayText] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (currentIndex < text.length) {
        setDisplayText((prevText) => prevText + text[currentIndex]);
        setCurrentIndex((prevIndex) => prevIndex + 1);
      }
    }, delay);

    return () => clearTimeout(timer);
  }, [currentIndex, delay, text]);

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

export default Typewriter;

使用方式如下所示

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

const App = () => {
  return (
    <div>
      <h1>
        <Typewriter text="Hello, World!" delay={100} />
      </h1>
    </div>
  );
};

export default App;