当一个元素显示在react中时，我如何使所有元素消失？

Question

我申请倒计时。总是有一个倒计时，在默认情况下，直到新年倒计时。我也有按钮为每一个主题的倒计时。但我想，当一个按钮被点击时，倒计时就会显示出来，而之前显示的倒计时就会消失。当另一个人出现的时候，我该怎么做呢？

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';

function App() {
  const [isShown, setIsShown] = useState(true);
  const [isShown2, setIsShown2] = useState(false);
  const [isShown3, setIsShown3] = useState(false);

  const handleClick = event => {
    setIsShown(current => !current);
  };
  const handleClick2 = event => {
    setIsShown2(current => !current);
  };
  const handleClick3 = event => {
    setIsShown3(current => !current);
  };

  return (
    <div className="App">
      {isShown && (<NewYear/>)}  
      {isShown2 && (<Chinese/>)}  
      {isShown3 && (<Birthday />)}  
      <button onClick={handleClick} className='nieuw'>New Year</button>
      <button onClick={handleClick2} className='chinees'>Chinese New Year</button>
      <button onClick={handleClick3} className='verjaardag'>My Birthday</button>
    </div>
  );
  };

export default App;

组件

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

function NewYear() {
    const calculateTimeLeft = () => {
        let year = new Date().getFullYear();
    
        const difference = +new Date(`01/01/${year+1}`) - +new Date();
        
        let timeLeft = {};
    
        if (difference > 0) {
          timeLeft = {
            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            hours: Math.floor((difference / (1000 * 60 * 60)) % 24), 
            minutes: Math.floor((difference / 1000 / 60) % 60),
            seconds: Math.floor((difference / 1000) % 60)
          };
        }
    
        return timeLeft
      };
        
        const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
        const [year] = useState(new Date().getFullYear());
    
        useEffect(() => {
          const timer = setTimeout(() => {
            setTimeLeft(calculateTimeLeft());
          }, 1000);
          return () => clearTimeout(timer);
        });
        const timerComponents = [];
    
      Object.keys(timeLeft).forEach((interval) => {
        if (!timeLeft[interval]) {
          return;
      }
    
      timerComponents.push(
        <span>
          {timeLeft[interval]} {interval}{" "}
        </span>
      );
      });
      return (
        <div className="nieuwjaar">
          <h1>New Year {year+1} Countdown</h1>
          {timerComponents.length ? timerComponents : <span>Time's up!</span>}
        </div>
      );
}

export default NewYear;

Answer 1

这里有一种方法，不需要为每个倒计时使用单独的布尔状态值，您可以跟踪活动的状态。

function App() {
    const [activeCountDown, setActiveCountDown] = useState('NewYear');

    const handleCountDownClick = (counterId) => () => setActiveCountDown(counterId);

    const getActiveCountDown = () => {
        switch (activeCountDown) {
            case 'ChineseNewYear':
                return <Chinese />;
            case 'Birthday':
                return <Birthday />;
            case 'NewYear':
                return <NewYear />;
            default:
                return null;
        }
    };

    return (
        <div className='App'>
            {getActiveCountDown()}
            <button onClick={handleCountDownClick('NewYear')} className='nieuw'>
                New Year
            </button>
            <button onClick={handleCountDownClick('ChineseNewYear')} className='chinees'>
                Chinese New Year
            </button>
            <button onClick={handleCountDownClick('Birthday')} className='verjaardag'>
                My Birthday
            </button>
        </div>
    );
}