在 Web 开发中，时间的处理是一个常见的需求。@n1ru4l/react-time-ago 是一个基于 React 的 npm 包，它可以帮助开发者快速实现类似于“X 分钟前”、“Y 天前”等时间显示效果。在本文中，我们将对这个 npm 包进行详细介绍和使用教程。
安装
使用 npm 可以方便地安装 @n1ru4l/react-time-ago，命令如下：
npm install @n1ru4l/react-time-ago
使用
导入
在使用前需要先导入该 npm 包，如下所示：
import TimeAgo from "@n1ru4l/react-time-ago";
import { currentTime } from "@n1ru4l/react-time-ago/lib/currentTime";基本用法
要渲染一个时间组件，只需要设置 DateTime 属性即可。例如：
<TimeAgo dateTime={new Date("2022-01-01T00:00:00.0Z").toISOString()} />以上代码将渲染出一个类似于“3 months ago”的字符串。其间隔时间取决于当前时间和设置的 dateTime 属性值。
格式化
在前面的例子中，我们只是简单地讨论了组件的基本用法。而要对组件进行更多的自定义和定制，则需要用到 format 属性。
<TimeAgo
dateTime={new Date("2022-01-01T00:00:00.0Z").toISOString()}
format={({ timeAgo }) => timeAgo + "ago"}
/>以上代码在 “3 months ago” 前添加了“ago”，并且还可以通过传递 format 参数来自定义其他显示效果。例如：
<TimeAgo
dateTime={new Date("2022-01-01T00:00:00.0Z").toISOString()}
format={({ timeAgo, seconds }) =>
seconds < 60 ? "just now" : timeAgo + " ago"
}
/>这里将在一分钟内的时间显示为“just now”，然后在一分钟后显示“X minutes ago”等。
current time
默认情况下，组件使用的时间是实例化时的时间。如果想要使时间动态更新，可以使用提供的 currentTime 方法，如下所示：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------------------------
-------- ----- -
------ -
--------
------------- ---------------------------------------------
---------- ------- -- -- ------- - - -----
---------------------------
--
--
-以上代码将到期时间设置为即将到来的日期，并将 currentTime 传递为 currentTime() 方法。
总结
本文简单介绍了 @n1ru4l/react-time-ago 的基本使用方法，包括安装、导入、基本用法、格式化以及使用 currentTime 方法。这些方法可以帮助开发者更好地实现时间的处理与显示，提高应用程序的用户体验。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a4c