如何为React代码实现开关功能：切换标题计数器与Rainbow文本

直接给你改造后的完整代码，核心是用React状态管理开关和计数器，通过useEffect控制定时器的启停，完全保留你原有的计数器递增逻辑：

import { useState, useEffect } from 'react';

function App() {
  // 开关状态：控制计数器是否激活
  const [isCounterActive, setIsCounterActive] = useState(false);
  // 用React状态管理计数器，替代原有的普通变量（避免组件重渲染时重置）
  const [counter, setCounter] = useState(1);

  // 保留你原有的计数器逻辑，加入开关判断
  const intervalFunction = () => {
    if (isCounterActive) {
      document.title = `Count is ${counter}`;
      // 用函数式更新计数器，确保拿到最新值
      setCounter(prev => {
        const newCount = prev + 5;
        return newCount >= 100 ? 0 : newCount;
      });
    } else {
      document.title = "Rainbow";
    }
  };

  // 用useEffect管理定时器，依赖开关状态
  useEffect(() => {
    let intervalId: number;
    if (isCounterActive) {
      // 开启开关时启动定时器，每秒执行一次（可根据需求调整间隔）
      intervalId = window.setInterval(intervalFunction, 1000);
    } else {
      // 关闭开关时立即设置标题为Rainbow，并清除定时器
      document.title = "Rainbow";
    }

    // 组件卸载或开关变化时清除定时器，防止内存泄漏
    return () => clearInterval(intervalId);
  }, [isCounterActive, counter]); // 依赖开关和计数器状态，确保状态变化时触发更新

  return (
    <div className="App">
      {/* 开关按钮，点击切换状态 */}
      <button onClick={() => setIsCounterActive(prev => !prev)}>
        {isCounterActive ? '关闭计数器' : '开启计数器'}
      </button>
    </div>
  );
}

export default App;

关键改动说明 #

• 把原有的普通counter变量改成React状态useState(1)，这样计数器变化时能触发组件更新，保证标题同步
• 新增isCounterActive状态控制开关，点击按钮即可切换
• 在intervalFunction里加入开关判断：激活时执行你的计数逻辑，关闭时直接设置标题为"Rainbow"
• 用useEffect管理定时器的生命周期：开关开启时启动定时器，关闭或组件卸载时清除，避免内存泄漏
• 计数器更新用函数式setCounter(prev => ...)，确保每次都基于最新的计数器值计算

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