React中点击按钮切换倒计时组件时隐藏其余组件的实现方法

你当前使用3个独立的布尔型useState分别控制三个倒计时组件的显隐，每个按钮的点击逻辑仅翻转自身对应state的布尔值，不会修改另外两个state的状态，根本无法实现互斥效果——只要连续点击两个不同的主题按钮，对应两个state都会变为true，两个倒计时组件就会同时显示在页面上。

删除3个独立的布尔state，改用单个state存储当前激活的倒计时类型，默认值设为新年倒计时的对应标识，点击按钮时直接将state更新为当前按钮对应的类型即可，渲染时仅匹配当前激活类型对应的组件。
修改后的App.js代码：

import './App.css';
import React from "react";
import NewYear from './Components/NewYear';
import Chinese from './Components/Chinese';
import Birthday from './Components/Birthday';
import { useState } from 'react';

// 统一定义倒计时类型常量，避免硬编码写错
const COUNT_DOWN_TYPE = {
  NEW_YEAR: 'newYear',
  CHINESE_NEW_YEAR: 'chineseNewYear',
  BIRTHDAY: 'birthday'
}

function App() {
  // 单个state控制当前展示的倒计时，默认展示新年倒计时
  const [activeCountDown, setActiveCountDown] = useState(COUNT_DOWN_TYPE.NEW_YEAR);

  return (
    <div className="App">
      {activeCountDown === COUNT_DOWN_TYPE.NEW_YEAR && <NewYear />}  
      {activeCountDown === COUNT_DOWN_TYPE.CHINESE_NEW_YEAR && <Chinese />}  
      {activeCountDown === COUNT_DOWN_TYPE.BIRTHDAY && <Birthday />}  
      <button 
        onClick={() => setActiveCountDown(COUNT_DOWN_TYPE.NEW_YEAR)} 
        className='nieuw'
      >
        New Year
      </button>
      <button 
        onClick={() => setActiveCountDown(COUNT_DOWN_TYPE.CHINESE_NEW_YEAR)} 
        className='chinees'
      >
        Chinese New Year
      </button>
      <button 
        onClick={() => setActiveCountDown(COUNT_DOWN_TYPE.BIRTHDAY)} 
        className='verjaardag'
      >
        My Birthday
      </button>
    </div>
  );
}

export default App;

你贴出的NewYear组件中，useEffect没有传入依赖数组，会导致组件每次重渲染都重新创建、销毁定时器，存在不必要的性能开销，建议将setTimeout替换为setInterval并传入空依赖数组，组件挂载时仅创建一次定时器，卸载时自动清理即可：

useEffect(() => {
  const timer = setInterval(() => {
    setTimeLeft(calculateTimeLeft());
  }, 1000);
  return () => clearInterval(timer);
}, []);

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