介绍
在前端开发中，我们经常需要在页面上显示时间，此时可以使用 @jshimko/react-time-ago 这个 npm 包来实现相对时间的显示效果。它基于 React，可以方便地在项目中使用。
安装
首先，在命令行中输入以下指令进行安装：
--- ------- -----------------------
如果你使用的是 yarn，可以使用以下命令：
---- --- -----------------------
这个包还依赖于 moment 这个日期处理库，如果你的项目中没有引入 moment，请先安装：
--- ------- ------
或者使用 yarn：
---- --- ------
使用
在安装好 @jshimko/react-time-ago 后，你需要在你的组件中引入它：
------ ------------ ---- --------------------------
接着，你就可以在 JSX 中使用它了：
------------- --------- ------- --
这样就可以在页面上显示当前时间的相对时间了。
参数
@jshimko/react-time-ago 提供了多个参数来控制显示效果和格式。下面是常用的参数和使用方法：
date
类型： Date
必填
要显示的日期对象。可以使用 JavaScript 的 Date 类型或者是 ISO 8601 格式的日期字符串。
live
类型： boolean
默认值： true
是否开启实时更新。如果开启，组件会在每分钟内每隔一秒更新一次时间。
locale
类型： string 或 string[]
默认值： 当前浏览器的语言环境
支持的语言可以查看 moment 的文档。
minPeriod
类型： number
默认值： 60
切换相对时间显示的最小间隔，单位是秒。
title
类型： string
当鼠标悬浮在组件上时显示的文本。
component
类型： string
默认值： "time"
渲染组件的元素类型。可以是 "time"，"span" 或 React.ComponentType。
formatter
类型： (value: moment.MomentInput, unit: string, suffix: string) => string | number | React.ReactNode
自定义相对时间的显示格式。value 是要格式化的时间值，unit 是时间的单位（如 "second"），suffix 是单位的后缀（如 "ago"）。返回值可以是一个字符串、一个数字或者是 React 元素。
示例
不开启实时更新
------------- --------- ------- ------------ --
切换最小间隔为 30 秒
------------- --------- ------- -------------- --
自定义显示格式
-------------
--------- -------
------------------ ----- ------- -- -
-- ----- --- --------- -
------ -----
- ---- -- ----- --- --------- -
------ -- -----
- ---- -
------ --------------------
-
--
--总结
@jshimko/react-time-ago 是一个方便的相对时间显示组件，可以帮助我们快速实现相对时间的效果。通过本文的介绍和示例，相信你已经掌握了它的使用方法，并且可以根据自己的需求来设置参数了。希望这篇文章能够帮助你在前端开发中更加高效地进行时间处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b8e81e8991b448d932a