封装一个显示实时时间的功能代码片段

 使用react的函数式组件封装一个显示实时时间的组件

import React, { useEffect, useState } from "react";

const Clock = () => {
  const [currentTime, setCurrentTime] = useState("");
  const getTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");

    const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    setCurrentTime(timeString);
  };
  useEffect(() => {
    const intervalId = setInterval(getTime, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <p>
      当前时间：<span>{currentTime}</span>
    </p>
  );
};

export default Clock;

场景：一般在数字化大屏项目中会用到显示实时时间的功能