时间是应用程序中的一个关键因素，因此，通常需要在应用程序中添加时间戳。为了向前端应用程序添加感性的时间戳，可以使用 @zeroarc/react-timeago 库。
什么是 @zeroarc/react-timeago？
@zeroarc/react-timeago 是一个 React 组件，用于将日期转换为易于理解的时间戳。它可以帮助前端应用程序提高用户体验，并减少了许多常见的时间戳管理问题。
如何使用 @zeroarc/react-timeago？
步骤 1：安装依赖
要使用 @zeroarc/react-timeago ，必须先安装它的依赖项。
npm install moment @zeroarc/react-timeago --save
步骤 2：导入和使用组件
要使用 @zeroarc/react-timeago ，必须先将其导入，并在需要显示时间戳的地方使用它。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------- -------- -------- -------------------- --------- ------
------
--
-
-在此示例中，我们已将 @zeroarc/react-timeago 导入为 TimeAgo 组件，并将其与日期进行呈现。将日期传递给 TimeAgo 组件的属性 datetime 以进行渲染。
如果您使用的是 moment 的不同日期格式，则需要将日期传递给 datetime 属性的 format 参数。
<p>Last Updated: <TimeAgo datetime="2020-08-07T12:00:00Z" format="YYYY-MM-DD HH:mm:ss Z" /></p>
步骤 3：样式配置
现在，我们已将时间戳添加到应用程序中，但是它看起来很简单。我们还需要通过添加样式来使其看起来更好。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------------------
------ ----------------------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------- -------- -------- -------------------- --------- -------------- ------------------- ------
------
--
-
-在此示例中，我们将 zh-cn 作为本地设置传递给 TimeAgo 组件的 locale 属性，并使用 timeago 类来定制CSS样式。
.timeago {
color: #666;
font-size: 14px;
margin: 10px 0px;
}结论
使用 @zeroarc/react-timeago 库，您可以轻松将日期转换为易于理解的时间戳。此外，通过对 TimeAgo 组件进行多项配置，您可以根据应用程序的需求自定义时间戳。
如果您正在寻找一个易于使用且高度可定制的 React 库来管理时间戳，那么 @zeroarc/react-timeago 库是值得一试的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e31fe