react moment如何使用

安装 react-moment

通过 npm 或 yarn 安装 react-moment：

npm install react-moment

或

yarn add react-moment

基本用法

引入 Moment 组件并传入日期字符串或 Date 对象：

import Moment from 'react-moment';

function App() {
  return (
    <div>
      <Moment date="2023-10-01" />
    </div>
  );
}

格式化日期

使用 format 属性自定义日期格式：

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

相对时间显示

通过 fromNow 属性显示相对时间（如“2 天前”）：

<Moment fromNow>
  2023-09-28T12:00:00Z
</Moment>

本地化支持

使用 locale 属性设置语言环境：

<Moment locale="zh-cn" fromNow>
  2023-09-28T12:00:00Z
</Moment>

时间间隔计算

通过 duration 属性计算时间间隔：

<Moment duration from="2023-09-28" to="2023-10-01">
  {({ days }) => `${days} 天`}
</Moment>

自定义输出

使用 children 函数自定义渲染逻辑：

<Moment date="2023-10-01">
  {(moment) => <span>{moment.format('LLLL')}</span>}
</Moment>

注意事项

1. 确保传入的日期格式能被 JavaScript 的 Date 对象解析。
2. 格式化字符串遵循 moment.js 的格式标准。
3. 本地化需提前加载对应的语言包（如 moment/locale/zh-cn）。