如何在 React-hooks 中创建计时器

Question

How i can create animated timer using React-hooks

Here is complete code what i had tried

Basically i was trying Displays the progress of time remaining as an animated ring. But somehow i am getting failed in it

I just followed this blog for creating animated timer https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/

  function setRemainingPathColor(timeLeft) {
    const { alert, warning, info } = COLOR_CODES;
    console.log(dataFromDiv);
    if (timeLeft <= alert.threshold) {
      dataFromDiv.current
        .querySelectorAll("base-timer-path-remaining")
        .classList.remove(warning.color);
      dataFromDiv.current
        .querySelectorAll("base-timer-path-remaining")
        .classList.add(alert.color);
    } else if (timeLeft <= warning.threshold) {
      dataFromDiv.current
        .querySelectorAll("base-timer-path-remaining")
        .classList.remove(info.color);
      dataFromDiv.current
        .querySelectorAll("base-timer-path-remaining")
        .classList.add(warning.color);
    }
  }

  React.useEffect(() => {
    let timer;
    let timePassed = 0;
    let timeLeft;
    timer = counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    timePassed = timePassed += 1;
    timeLeft = counter - timePassed;
    setRemainingPathColor(timeLeft);
    return () => {
      if (timer) {
        clearTimeout(timer);
      }
    };
  }, [counter]);

Answer 1

The error you were getting is because dataFromDiv.current.querySelectorAll(...) was always returning undefined because dataFromDiv.current was a reference to div#base-timer-path-remaining which is the element you wanted to modify. So, your code would work fine by just removing .querySelectorAll(...) .

However, there are some better ways to structure your code:

Instead of doing direct dom manipulations, it's easier in this case to just figure out which color you want using useMemo to set up derived data based on the counter value.

You can also use an interval instead of a timer as it's easier to work with and a little bit cleaner. This also uses the updater function form of setCounter so that the effect doesn't need to have counter in the dependencies.

I also added a reset button to my example below so you don't have to re-run it every time.

  const pathColor = React.useMemo(() => {
    const { alert, warning, info } = COLOR_CODES;
    if (counter <= alert.threshold) {
      return alert.color;
    } else if (counter <= warning.threshold) {
      return warning.color;
    } else {
      return info.color;
    }
  }, [counter]);

  React.useEffect(() => {
    const timerId = setInterval(() => {
      setCounter(counter => {
        if (counter <= 0) {
          clearInterval(timerId);
          return counter;
        }
        return counter - 1;
      });
    }, 1000);
    return () => {
      clearInterval(timerId);
    };
  }, [timerReset]); // this timerReset is to make sure that the interval starts off again whenever the reset button is pressed.

This line is simply a way to force a re-render. The reducer function x=>x+1 increments the timerReset value whenever dispatch (renamed to resetTimer ) is called. And then I use timerReset to force the effect to re-run in order to start the interval again (if it stopped)

  const [timerReset, resetTimer] = React.useReducer(x => x + 1, 0);

 const padTime = time => { return String(time).length === 1? `0${time}`: `${time}`; }; const format = time => { const minutes = Math.floor(time / 60); const seconds = time % 60; return `${minutes}:${padTime(seconds)}`; }; const WARNING_THRESHOLD = 10; const ALERT_THRESHOLD = 5; const COLOR_CODES = { info: { color: "green" }, warning: { color: "orange", threshold: WARNING_THRESHOLD }, alert: { color: "red", threshold: ALERT_THRESHOLD } }; function App() { const [counter, setCounter] = React.useState(20); const [timerReset, resetTimer] = React.useReducer(x => x + 1, 0); const pathColor = React.useMemo(() => { const { alert, warning, info } = COLOR_CODES; if (counter <= alert.threshold) { return alert.color; } else if (counter <= warning.threshold) { return warning.color; } else { return info.color; } }, [counter]); React.useEffect(() => { const timerId = setInterval(() => { setCounter(counter => { if (counter <= 0) { clearInterval(timerId); return counter; } return counter - 1; }); }, 1000); return () => { clearInterval(timerId); }; }, [timerReset]); return ( <div className="App"> <div className="base-timer"> <svg className="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > <g className="base-timer__circle"> <circle className="base-timer__path-elapsed" cx="50" cy="50" r="45" /> <path id="base-timer-path-remaining" className={`base-timer__path-remaining ${pathColor}`} d=" M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0 " /> </g> </svg> <span id="base-timer-label" className="base-timer__label"> {format(counter)} </span> </div> <button onClick={() => { setCounter(20); resetTimer(); }} > reset timer </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, rootElement );

 /* Sets the containers height and width */.base-timer { position: relative; height: 300px; width: 300px; } /* Removes SVG styling that would hide the time label */.base-timer__circle { fill: none; stroke: none; } /* The SVG path that displays the timer's progress */.base-timer__path-elapsed { stroke-width: 7px; stroke: grey; }.base-timer__path-remaining { stroke-width: 7px; stroke-linecap: round; transform: rotate(90deg); transform-origin: center; transition: 1s linear all; fill-rule: nonzero; stroke: currentColor; }.base-timer__path-remaining.green { color: rgb(65, 184, 131); }.base-timer__path-remaining.orange { color: orange; }.base-timer__path-remaining.red { color: red; }.base-timer__label { position: absolute; width: 300px; height: 300px; top: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"></div>