React中实现TimerPage与RepoPage定时循环切换的问题

嘿，我来帮你搞定这个定时循环切换组件的需求！你现在的rotateRender()只是固定返回RepoPage，因为条件写死了false，要实现先显示RepoPage→5分钟后切到TimerPage→停留15分钟再切回RepoPage的循环逻辑，咱们得结合React状态管理和定时器来实现，具体步骤如下：

1. 用状态管理当前显示的页面 #

首先用useState钩子创建一个状态变量，用来标记当前应该渲染的组件，初始值设为'repo'（符合需求里先显示RepoPage的要求）。

2. 用useEffect实现定时切换逻辑 #

在组件挂载后，根据当前页面状态设置对应的定时器：

• 当前是RepoPage时，5分钟（300000毫秒）后切换到TimerPage
• 当前是TimerPage时，15分钟（900000毫秒）后切回RepoPage
  同时一定要记得清理定时器，避免组件卸载后定时器仍在运行导致内存泄漏。

3. 修改渲染逻辑 #

根据状态变量的值动态返回对应的组件，不用再写死固定条件。

完整代码示例 #

import React, { useState, useEffect } from 'react';
import TimerPage from './TimerPage'; // 请确保组件路径正确
import RepoPage from './RepoPage';

function ParentComponent() {
  // 初始状态：显示RepoPage
  const [currentPage, setCurrentPage] = useState('repo');

  useEffect(() => {
    let timer;
    // 根据当前页面设置不同的切换延迟
    if (currentPage === 'repo') {
      // 5分钟后切换到TimerPage
      timer = setTimeout(() => {
        setCurrentPage('timer');
      }, 5 * 60 * 1000); // 转换为毫秒：5*60秒*1000
    } else {
      // 15分钟后切回RepoPage
      timer = setTimeout(() => {
        setCurrentPage('repo');
      }, 15 * 60 * 1000); // 转换为毫秒：15*60秒*1000
    }

    // 清理函数：组件卸载或currentPage变化时清除定时器
    return () => clearTimeout(timer);
  }, [currentPage]); // 依赖currentPage，状态变化时重新触发定时器逻辑

  // 动态渲染组件的函数
  const rotateRender = () => {
    return currentPage === 'timer' ? <TimerPage /> : <RepoPage />;
  };

  return (
    <div className="page-container">
      {rotateRender()}
    </div>
  );
}

export default ParentComponent;

额外优化小提示 #

你也可以直接把渲染逻辑写在JSX里，省去单独的rotateRender()函数，代码会更简洁：

return (
  <div className="page-container">
    {currentPage === 'timer' ? <TimerPage /> : <RepoPage />}
  </div>
);

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