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

Question

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

这是 react 计时器 Hook 的屏幕截图。

这是我使用时的截图。

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

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

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