在 Web 开发中，我们经常需要处理日期和时间的格式化。但是在 React 中，这个过程变得更加容易和直观，因为我们可以使用一个叫做 react-moment 的 npm 包来帮助我们完成这个任务。在本篇文章中，我们将深入介绍如何使用该包来处理时间格式化。
什么是 React-Moment?
React-Moment 为我们提供了一个便捷的方式来轻松地操纵日期和时间，它使得操作不同格式的时间更加容易。我们可以使用它来代替 Moment.js 或其他类似的库。
如何使用 React-Moment?
安装
首先，我们需要使用 npm 安装 react-moment。在终端中键入以下命令：
npm install --save react-moment moment
在安装过程中，我们会提到 moment，这是一个必需的库。React-Moment 仅通过它来获得 Moment 的实例，因此我们必须将它作为依赖项安装。
引入组件
在安装完成后，我们就可以在 React 组件中导入 react-moment 了。比如，我们在 App.js 中正常地使用它：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
-------- ----- -
------ -
-----
----------- -- ------------ --------------
------- ------------------ ---------------------------------------
------
--
-
------ ------- ----通过运行上述代码，我们可以看到输出结果为：
Welcome to React-Moment Tutorial! 2022/02/22 10:56:00
格式化时间
React-Moment 的主要功能是帮助我们格式化日期和时间。它提供了一种简单的方式，让我们能够轻松地控制我们的日期和时间格式。比如，我们可以使用 format 属性来设置日期和时间的格式，并将其传递给 Moment 组件。
以下是一些常见的格式化选项：
YYYY：年份，如 2018，2019 等等；MM：月份，如 01，02，11 等等；DD：天数，如 01，02，12 等等；hh：小时数，如 01，02，11 等等；mm：分钟数，如 01，02，15 等等；ss：秒数，如 01，02，30 等等。
因此，如果我们需要在容器中输出当前时间，则可以简单地使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
-------- ----- -
------ -
-----
----------- ---------
------- ------------------ -------------- ----------------
------
--
-
------ ------- ----从上面的代码中，可以看出我们使用了 new Date()来获取当前时间。
格式化相对时间
React-Moment 还提供了一种格式化相对时间的方式。例如，我们可以使用 fromNow() 方法将时间格式化为相对时间：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
-------- ----- -
------ -
-----
----------- ---------
------- -----------------------------------------
------
--
-
------ ------- ----当我们运行上述代码后，输出结果如下：
Created Date 3 years ago
相对时间转换
我们同样可以将相对时间格式化为日期时间。比如，以 YYYY/MM/DD hh:mm:ss 格式将 fromNow() 转化为时间戳：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
-------- ----- -
----- ------------ - -----------------------
------ -
-----
---------- ---------
------- ------------------ ---------------------------------
-------- --------------------------------
------
--
-
------ ------- ----从上面的代码中，可以看到我们首先将时间戳保存到 dateToFormat 变量中，然后将它传递给 Moment 组件，显式格式化为指定格式的时间戳，然后使用 fromNow() 将相对时间格式化为字符串。
当我们运行上述代码后，输出结果如下：
Target Time 2022/02/22 08:56:00 (in a few seconds)
总结
在本篇文章中，我们深入介绍了如何使用 react-moment 以及处理时间格式化。React-Moment 提供了许多便捷的方法，帮助我们简化日期和时间的操作。我们可以使用 format 属性以特定的方式格式化时间，使用 fromNow() 将相对时间格式化为一个字符串。希望本篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72c52ea9b7065299ccbbd3