react moment如何使用

安装 React Moment

在项目中安装 react-moment 和其依赖的 moment 库。通过 npm 或 yarn 安装：

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

基本用法

导入 Moment 组件并包裹日期或时间数据。默认情况下，Moment 会格式化当前时间：

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

function App() {
  return <Moment />; // 输出当前时间，如 "2023-10-05T12:00:00Z"
}

格式化日期

通过 format 属性自定义日期显示格式。使用 Moment.js 格式字符串：

<Moment format="YYYY/MM/DD">{new Date()}</Moment> // 输出 "2023/10/05"

显示相对时间

使用 fromNow 属性将日期转换为相对时间（如 "2 days ago"）：

<Moment fromNow>{new Date(Date.now() - 86400000)}</Moment> // 输出 "a day ago"

本地化支持

通过 locale 属性设置语言环境。需先引入对应的 moment 语言包：

import "moment/locale/zh-cn";

<Moment locale="zh-cn" fromNow>{new Date()}</Moment> // 输出 "几秒前"

使用 Unix 时间戳

直接传递 Unix 时间戳（秒或毫秒）作为子内容：

<Moment unix>{1664966400}</Moment> // 输出时间戳对应日期

自定义输出组件

通过 element 属性指定包裹的 HTML 元素类型：

<Moment element="span" format="HH:mm">{new Date()}</Moment> // 输出 <span>12:00</span>

时区处理

使用 tz 属性指定时区（需安装 moment-timezone）：

import Moment from "react-moment";
import "moment-timezone";

<Moment tz="America/New_York" format="LLLL">{new Date()}</Moment>

注意事项

• 确保 moment 版本与 react-moment 兼容。
• 频繁更新的时间（如实时显示）建议结合 useEffect 管理状态更新。
• 生产环境中考虑按需加载语言包以减少体积。