返回

gt-react@10.16.0

Ernest McCarter avatarErnest McCarter
gt-reactrelative-timeintlvariables

概览

新增 <RelativeTime> 变量组件，用于渲染“2 小时前”或“3 天后”这类本地化相对时间字符串。底层使用 Intl.RelativeTimeFormat。

软件包版本
gt-react10.16.0
gt-next6.15.0
generaltranslation8.2.0

用法

根据 Date 自动选择时间单位

传入一个 Date，组件会自动选择最合适的时间单位：

import { RelativeTime } from "gt-react";

<RelativeTime>{post.createdAt}</RelativeTime>
// "2小时前"、"3天后"，等等

明确指定值和时间单位

指定确切的值和时间单位，语义与 Intl.RelativeTimeFormat API 一致：

import { RelativeTime } from "gt-react";

<RelativeTime value={3} unit="day" />
// "3天后"

在译文中

将 <RelativeTime> 包裹在 <T> 中，以便将其纳入译文句子中：

import { T, RelativeTime } from "gt-react";

<T id="commentPosted">
  Posted <RelativeTime>{comment.createdAt}</RelativeTime>
</T>

Hydration 安全

<RelativeTime> 会在本地计算相对时间，这可能会在服务器端渲染的应用中导致 Hydration 不匹配。为避免这种情况，请固定 baseDate：

const now = new Date();

<RelativeTime baseDate={now}>{post.createdAt}</RelativeTime>

核心工具

此外，generaltranslation 还提供了两个新的格式化函数：

  • formatRelativeTimeFromDate(date, options) — 独立函数
  • GT.formatRelativeTimeFromDate(date, options) — 类方法

链接