react moment如何使用

安装 Moment.js 和 React-Moment

确保项目中已安装 moment 和 react-moment 依赖。通过 npm 或 yarn 安装：

npm install moment react-moment
# 或
yarn add moment react-moment

基本用法

在 React 组件中引入 Moment 组件，直接渲染日期或时间：

import React from 'react';
import Moment from 'react-moment';

function App() {
  return (
    <div>
      <Moment>{new Date()}</Moment>
    </div>
  );
}

格式化日期

通过 format 属性自定义输出格式：

<Moment format="YYYY-MM-DD HH:mm:ss">{new Date()}</Moment>

常用格式符：

• YYYY：四位年份
• MM：两位月份
• DD：两位日期
• HH：24小时制小时
• mm：分钟
• ss：秒

相对时间显示

使用 fromNow 属性显示相对时间（如“2小时前”）：

<Moment fromNow>{new Date(Date.now() - 3600000)}</Moment>

本地化支持

加载本地化语言包后，通过 locale 属性切换语言：

import 'moment/locale/zh-cn';

<Moment locale="zh-cn" fromNow>{new Date()}</Moment>

时间差计算

通过 diff 和 unit 属性计算时间差：

<Moment diff="2023-12-31" unit="days">{new Date()}</Moment>

自定义输出

使用 interval 属性实现实时更新（单位：毫秒）：

<Moment interval={1000} format="HH:mm:ss">{new Date()}</Moment>

注意事项

• 确保传入的时间参数是 Date 对象、ISO 字符串或时间戳。
• 格式化符号需参考 Moment.js 官方文档。
• 本地化需单独引入对应的语言包。