react+momentjs实时获取时间、日期、星期几

3,297 阅读1分钟

直接贴效果图

时间小组件,定时器 + momentjs

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import './index.less';

const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

const WidgetTime = () => {
  const [renderKey, setRenderKey] = useState(1);

  useEffect(() => {
     const timer = setInterval(() => {
       setRenderKey(Math.random());
     }, 1000);
   // 组件卸载清除定时器
   return () => clearInterval(timer);
 }, []);

return (
   // 获取当前时间 年-月-日 时:分:秒  moment().format('YYYY-MM-DD HH:mm:ss') 
   // 获取星期几,其中星期日为0、星期六为6  moment().day()
   <div className="time-component">
     <div className="time">{moment().format('HH:mm:ss')}</div>
     <div className="date">
       {moment().format('YYYY-MM-DD')}&nbsp;{weeks[moment().day()]}
     </div>
   </div>
  );
 };
export default WidgetTime;

结束,拜拜。