以 2 位数字显示计时器而不是一个 react-timer-hook

Question

我在我的 React 应用程序中使用 react-timer-hook。它工作得很好，但在示例中，计时器有两位数字表示小时、分钟和秒，但是当我导入它并将计时器用作我的应用程序中的一个组件时，秒表显示一位数字，当值时只有两位数字增加到 9 以上。如果时间小于 10，谁能帮我添加尾随零？

这是反应计时器挂钩的屏幕截图。

这是我使用时的截图

下面是我如何使用它的代码。

import React from "react"; 
import { useStopwatch } from "react-timer-hook"; 
export default function MyStopwatch() {    
const {seconds, minutes,hours, days, isRunning, start, pause, reset } =
useStopwatch({ autoStart: true });};   
return (
<>
<div>
<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
</div>
</>   
); 
}

Answer 1

好吧，这是一个选项：

import React from "react"; 
import ReactDOM from 'react-dom'
import { useStopwatch } from "react-timer-hook"; 
export default function MyStopwatch() {    
  const {
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    reset,
  } = useStopwatch({ autoStart: true });

  const formatTime = (time) => {
    return String(time).padStart(2, '0')
  }

  return (
    <div>
      <span>{formatTime(hours)}</span>:<span>{formatTime(minutes)}</span>:<span>{formatTime(seconds)}</span>
    </div>
  ); 
}

ReactDOM.render(
  <MyStopwatch />,
  document.getElementById('container')
);

游乐场版本在这里https://codesandbox.io/s/react-playground-forked-byo61?file=/index.js

以 2 位数字显示计时器而不是一个 react-timer-hook

Show timer in 2 digits instead of one react-timer-hook

timer

reactjs

react-hooks