概述
在前端开发过程中，时间戳的显示和格式化是常用的功能。而 react-simple-timeago 提供了一个简单而强大的方式来显示和格式化时间戳。本文将向你介绍如何使用这个 npm 包。
安装
你可以通过 npm 安装 react-simple-timeago：
--- ------- --------------------
使用
react-simple-timeago 是一个简单可配置的 React 组件，其接受一个 Date 类型的时间戳或一个表示时间戳的字符串。设计目标是易于使用，所以只需将它作为一个类似于 元素的组件使用即可。
基础用法
假设你已经将 react-simple-timeago 安装到你的项目：
------ ----- ---- --------
------ - ------ - ---- ------------
------ ------- ---- -----------------------
----- --- - -- -- -
-----
-------- ---------------- - ---- - -- - -- --
------
--
----------- --- ---------------------------------当你运行代码时，你将看到一段格式化的时间戳，距离当前时间大约为 5 分钟。
配置
react-simple-timeago 支持很多配置项。以下是一个例子：
--------
---------------- - ---- - -- - --
--------------
-----------
-- ------------ -------- --- ---- ---- ------ --
------- -- ----
-------- --- ----
------- -- -----
-------- --- -----
----- -- -----
------ --- -----
---- -- ----
----- --- ----
----- -- ----
------ --- ----
------ -- -----
------- --- -----
----- -- ----
------ --- ----
--
---通过这些配置项，你可以自定义时间戳的格式，包括：
- 与现在的时间差距
- 现在和一小时前之间的时间差距
- 今天的时间
- 之前的日期（例如，上个月）
自定义格式
对于更通用的用例，你可以简单地传一个代表时间的字符串。
-------- ----------------------------------- --
注意，这里需要传一个有效的 ISO 8601 时间戳，否则会触发错误。
样式
如果你需要对 react-simple-timeago 的样式进行更精细的控制，你可以在包含目标组件的父级元素上添加一些样式，来实现你的效果。
切换语言
设置本地化值(locale)即可修改语言。
-------- ---------------- - ---- - -- - -- -------------- --
结论
react-simple-timeago 是一个易于使用，可定制性强的轻量级 React 时间戳格式化 npm 包。在你的下一个 React 项目中，如果你需要处理时间戳，同时要显示简单和人性化的显示格式，它是一个很不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005545f81e8991b448d1aac