React打字效果问题：仅数组首个字符串生效，需逐行全部渲染

嘿，我明白你现在的困扰——已经实现了打字效果，但只有数组第一个字符串能正常显示，想要让所有字符串逐行依次完成打字动画对吧？我来帮你调整代码，实现这个需求。

首先，咱们得先理清楚问题根源：原来的代码应该只针对单个字符串做了打字逻辑，没有跟踪当前要处理的字符串索引，也没处理打完一个后切换到下一个的逻辑。下面是修改后的完整组件代码，我会一步步解释关键部分：

import React, { useState, useEffect } from 'react';
import "./Content.css";

const Content = () => {
  const messages = ["WELCOME TO MY WORLD", "THIS IS MY WEBSITE", "I AM AT YOUR SERVICE"];
  // 状态管理：当前处理的字符串索引、正在输入的文本、是否处于输入状态
  const [currentIndex, setCurrentIndex] = useState(0);
  const [currentText, setCurrentText] = useState('');
  const [isTyping, setIsTyping] = useState(true);
  // 打字速度（毫秒/字符）
  const typingSpeed = 150;
  // 打完一个字符串后的等待时间
  const waitTime = 1000;

  useEffect(() => {
    if (!isTyping) return;

    // 处理当前字符串的打字逻辑
    const typingTimer = setTimeout(() => {
      const currentMessage = messages[currentIndex];
      // 如果当前文本还没打完，继续追加字符
      if (currentText.length < currentMessage.length) {
        setCurrentText(prev => prev + currentMessage.charAt(currentText.length));
      } else {
        // 当前字符串打完，等待后切换到下一个（如果还有的话）
        setTimeout(() => {
          if (currentIndex < messages.length - 1) {
            setCurrentIndex(prev => prev + 1);
            setCurrentText('');
          } else {
            // 所有字符串都打完了，可以选择停止或者循环
            setIsTyping(false);
            // 如果要循环的话，替换成下面两行：
            // setCurrentIndex(0);
            // setCurrentText('');
          }
        }, waitTime);
      }
    }, typingSpeed);

    // 清理定时器
    return () => clearTimeout(typingTimer);
  }, [currentText, currentIndex, isTyping, messages, typingSpeed, waitTime]);

  return (
    <div className="content-container">
      {/* 渲染已经完成打字的所有字符串 */}
      {messages.slice(0, currentIndex).map((msg, idx) => (
        <div key={idx} className="typed-text">{msg}</div>
      ))}
      {/* 渲染当前正在打字的字符串 */}
      <div className="typing-text">{currentText}</div>
      {/* 可选：添加光标动画 */}
      {isTyping && <span className="cursor">|</span>}
    </div>
  );
};

export default Content;

关键逻辑说明： #

• 状态管理：用currentIndex跟踪当前要处理的字符串位置，currentText存储正在输入的文本，isTyping控制打字流程的启停。
• useEffect依赖：监听相关状态变化，确保每次文本更新或索引切换时，定时器能正确触发。
• 打字与切换逻辑：当当前字符串的字符还没打完时，逐个追加；打完后等待指定时间，再切换到下一个字符串，直到所有字符串处理完成（也可以改成循环模式）。
• 逐行渲染：用slice(0, currentIndex)渲染已经完成打字的字符串，再单独渲染当前正在输入的文本，实现逐行显示的效果。

注意事项： #

请注意：这段代码是大型项目的一部分，单独运行可能无法正常工作——它依赖项目中已有的Content.css样式文件（比如.content-container、.typed-text、.typing-text、.cursor这些类的样式定义），同时需要整合到你的React项目的组件体系中才能运行。

你可以根据项目需求调整typingSpeed（打字速度）和waitTime（字符串间的等待时间），也可以修改光标样式或者循环逻辑来适配你的场景。

内容的提问来源于stack exchange，提问作者Udendu Abasili