将 Moment.js 用于 React 应用程序

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 什么是 Moment.js
  2. 在 React 中如何使用 Moment.js
  3. Moment.js 实际示例
  4. react-moment
  5. 其他可行的选择
将 Moment.js 用于 React 应用程序

很难想象任何涉及日期和时间的现代 Web 应用程序。React 应用程序也不例外。

管理日期和时间是在 React 中构建动态应用程序的核心。由于这个事实,JavaScript 包含一个 Date 对象,这对于涉及日期和时间的简单操作很有用。

然而,使用 Date 对象说起来容易做起来难。日期 API 不足以格式化、国际化和一般地操作日期。

出于这个原因,JavaScript 开发人员社区创建了许多日期库来执行一些更高级的操作。这些使我们能够更有效地处理日期,而不会浪费时间和精力。

什么是 Moment.js

它是用于在 JavaScript 中格式化日期的最稳定的库之一。Moment 库主要用于解析和格式化数据值,但它具有许多可能对构建现代应用程序有用的功能。

例如,Moment 也可用于数据验证。它适用于 Node.js 和常规 JavaScript。

它可用于前端应用程序以及服务器端编程。它还与许多流行的 JavaScript 库兼容,包括 React 和 TypeScript。

该库提供了一个围绕 JavaScript 中原生 Date 对象的 API。这样,我们就不必与原始的 Date API 交互或更改它。

Moment 库易于学习,而且还支持多种语言。所以它可以很容易地解决我们的国际化问题。

此时,库处于维护模式。它仍然很稳定,所有方法都按预期工作。

然而,创作者决定停止发布新版本。如果你习惯了 Moment 并想将它用于你的 React 应用程序,你可以自由地这样做。

那些关心他们应用程序的长期未来的人可能想要考虑其他 JavaScript 日期库。

在 React 中如何使用 Moment.js

因为 Moment.js 是一个外部库,我们必须将它安装在我们的项目文件夹中。当我们这样做的时候,我们也可以安装 react-moment 包,我们将在后面讨论。

如果我们的应用需要时区功能,建议同时安装 moment-timezone

npm install --save moment moment-timezone

一旦我们完成安装包,我们必须导入它们。找到我们打算使用它们的文件并导入它们:

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

我们将 Moment 大写,因为它是专门为该库中的日期操作而创建的 React 组件。

Moment.js 实际示例

让我们看一个在 React 中使用 Moment 库的示例。

let momentObject = moment()

在这个例子中,我们返回一个简单的 moment 对象,代表代码的执行时间。Moment 库包括许多其他更有趣的方法。

例如,.add() 方法可以通过添加特定的时间来改变对象。让我们看一个例子:

moment().add(10, 'days')

正如我们所见,.add() 方法的第一个参数指定数量,第二个参数是指定时间段所必需的。我们可以将多个方法链接在一起,例如:

moment().add(10, 'days').add(1, 'months')

此代码将在 moment() 函数返回的日期上再增加一个月。

react-moment

react-moment 基于 moment 包,但在组件中提供相同的功能。让我们看一个示例,我们必须将字符串格式化为日期。

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

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

或者,我们可以使用 Moment 组件上的 date 属性来传递字符串。日期甚至不必是字符串 - 它可以是数组、对象或 Date 对象的实例。

Moment 组件提供了一种在 React 应用程序中使用 Moment 库的核心功能的简单方法。该组件接受许多 props,例如:dateformattrim 等等。

有关详细信息,请查看官方文档

其他可行的选择

Moment 库并不是唯一在 JavaScript 中处理日期的库。date-fns 之类的软件包提供了一个很好的选择。

它具有信息丰富的文档和与 Moment 库一样多的功能。这个库中的每个函数都有文档记录。

它们的名称易于使用,使函数的目的易于理解。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn