react moment如何使用

安装 react-moment

通过 npm 或 yarn 安装 react-moment 包。确保项目中已安装 moment.js，因为 react-moment 依赖它。

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

基本用法

在组件中引入 Moment 组件，直接包裹日期字符串或时间戳。默认会格式化输出本地化的日期时间。

import Moment from 'react-moment';

function App() {
  return (
    <div>
      <Moment>2023-10-01T12:00:00Z</Moment>
    </div>
  );
}

自定义格式

通过 format 属性指定输出格式，格式规则与 moment.js 一致。

<Moment format="YYYY-MM-DD HH:mm:ss">
  2023-10-01T12:00:00Z
</Moment>

相对时间

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

<Moment fromNow>2023-10-01T12:00:00Z</Moment>
<Moment from="2023-10-02T12:00:00Z">2023-10-01T12:00:00Z</Moment>

本地化配置

通过 locale 属性设置语言，需提前加载对应的 moment.js 语言包。

import 'moment/locale/zh-cn';

<Moment locale="zh-cn">2023-10-01T12:00:00Z</Moment>

时区转换

使用 tz 属性指定时区，需安装 moment-timezone 并加载时区数据。

npm install moment-timezone

import 'moment-timezone';

<Moment tz="America/New_York" format="LLLL">
  2023-10-01T12:00:00Z
</Moment>

间隔时间

通过 duration 和 unit 属性计算时间间隔。

<Moment duration="2023-10-01T12:00:00Z" unit="days">
  2023-10-05T12:00:00Z
</Moment>

注意事项

• 输入日期可以是 ISO 字符串、时间戳或 Date 对象。
• 避免在渲染循环中频繁创建动态格式，可能影响性能。
• 服务端渲染时需确保时区和语言包一致。