如何在刷新 new Date() 后停止调整大小

Question

我目前正在开发 React 时钟应用程序。一切正常，除了调整我的大小

元素。每当当前时间更新时都会发生这种调整大小，但仅限于少数数字。我认为介于 01 和 20 之间，但这并不重要。

我认为问题在于每个数字占用的空间量不同，例如“1”的宽度小于“5”，因此需要调整大小。

我试图在 css 中添加letter-spacing属性，但它不起作用。

有人知道如何防止这种情况吗？

function App() {

  const [time,setTime] = useState({

  currentTime : ''

  })

 //Insert current time to state

 function currentTime(){

   let timeNow = new Date().toLocaleTimeString('it-IT');

   setTime(prevState => ({

    ...prevState,

    currentTime:timeNow

   }))

 }

 //Update current time every second

 useEffect(()=>{

   setInterval(() => {

   currentTime()

   }, 1000);

 },[])

return (

  <div className="App">

    <p>{time.currentTime}</p>

  </div>

);

}

Answer 1

使用等宽字体是这个问题的答案