将 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,例如:date
。format
、trim
等等。
有关详细信息,请查看官方文档。
其他可行的选择
Moment 库并不是唯一在 JavaScript 中处理日期的库。date-fns
之类的软件包提供了一个很好的选择。
它具有信息丰富的文档和与 Moment 库一样多的功能。这个库中的每个函数都有文档记录。
它们的名称易于使用,使函数的目的易于理解。
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