使用 react-countdown-circle-timer 仅显示反应时间

Question

我想创建一个测试页来响应倒数计时器（50 分钟），因为我使用了 react-countdown-circle-timer 模块。问题是会议记录没有改变。我只想在应用程序中显示剩余分钟数。

import React from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

import "./styles.css";

export default function App() {
  const minuteSeconds = 60;
  const hourSeconds = 3000;
  const renderTime = (dimension, time) => {
    return (
      <div className="time-wrapper">
        <div className="time">{time}</div>
        <div>{dimension}</div>
      </div>
    );
  };

  const getTimeMinutes = (time) => {
    return ((time % hourSeconds) / minuteSeconds) | 0;
  };

  const timerProps = {
    isPlaying: true,
    size: 120,
    strokeWidth: 6
  };

  return (
    <div className="App">
      <CountdownCircleTimer
        {...timerProps}
        isPlaying
        initialRemainingTime={hourSeconds}
        duration={hourSeconds}
        colors={[["#3f51b5"]]}
        onComplete={() => console.log("times up")}
      >
        {({ elapsedTime }) => {
          //console.log(hourSeconds - elapsedTime / 1000);
          return renderTime(
            "minute",
            getTimeMinutes(hourSeconds - elapsedTime / 1000)
          );
        }}
      </CountdownCircleTimer>
    </div>
  );
}

我为应用程序示例添加了一个代码沙箱 link。 https://codesandbox.io/s/cool-sea-7bh6h?file=/src/App.js:0-1131 如何解决问题？

Answer 1

10 秒计时器示例：

为 minute 创建状态并每分钟减少一次。

这里是你如何做到的。

import React, { useState, useEffect, useRef } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

import "./styles.css";

export default function App() {
  const [minute, setMinuter] = useState(50);
  const funRef = useRef(null);
  const hourSeconds = 3000;
  const renderTime = (dimension, time) => {
    return (
      <div className="time-wrapper">
        <div className="time">{time}</div>
        <div>{dimension}</div>
      </div>
    );
  };

  useEffect(() => {
    if (minute !== 0) {
      funRef.current = setTimeout(() => {
        setMinuter(minute - 1);
      }, 60000);
    } else {
      clearTimeout(funRef.current);
    }
  });

  const timerProps = {
    isPlaying: true,
    size: 120,
    strokeWidth: 6
  };

  return (
    <div className="App">
      <CountdownCircleTimer
        {...timerProps}
        isPlaying
        initialRemainingTime={hourSeconds}
        duration={hourSeconds}
        colors={[["#3f51b5"]]}
        onComplete={() => console.log("times up")}
      >
        {({ elapsedTime }) => {
          //console.log(hourSeconds - elapsedTime / 1000);
          return renderTime("minute", minute);
        }}
      </CountdownCircleTimer>
    </div>
  );
}

这是工作Codesandbox Link

使用 react-countdown-circle-timer 仅显示反应时间

show only minutes in react using react-countdown-circle-timer

javascript

countdowntimer

reactjs