一个简单的 React 打字机效果组件

以下是一个简单的 React 组件示例，它实现了一个打字机效果，可以传入文本和时间参数来控制文本的显示速度：

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      if (currentIndex < text.length) {
        setDisplayText((prevText) => prevText + text[currentIndex]);
        setCurrentIndex((prevIndex) => prevIndex + 1);
      } else {
        clearInterval(interval);
      }
    }, typingSpeed);

    return () => {
      clearInterval(interval);
    };
  }, [text, typingSpeed, currentIndex]);

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

export default Typewriter;

在这个组件中：

• text 是要显示的文本。
• typingSpeed 是打字速度，以毫秒为单位，控制每个字符显示的时间间隔。

组件使用 useState 来跟踪当前显示的文本和字符索引。它还使用 useEffect 来设置一个定时器，每隔 typingSpeed 毫秒将文本的下一个字符添加到 displayText 中，直到显示完整文本为止。

你可以将这个组件添加到你的 React 应用程序中，并传递所需的文本和打字速度作为属性。例如：

import React from 'react';
import Typewriter from './Typewriter'; // 假设 Typewriter 组件位于同一目录下

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

export default App;

在这个示例中，文本 "Hello, World!" 将以每个字符之间的间隔100毫秒的速度显示在页面上。你可以根据需要调整文本和打字速度。