# General Translation Changelog: gt-react 10.16.0: 本地化的相对时间字符串
URL: https://generaltranslation.com/zh/blog/gt-react_v10_16_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-01

## 概览

新增 [`<RelativeTime>`](/docs/react/reference/components/relative-time) 变量组件，用于渲染“2 小时前”或“3 天后”这类本地化相对时间字符串。底层使用 [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)。

| 软件包                  | 版本      |
| -------------------- | ------- |
| `gt-react`           | 10.16.0 |
| `gt-next`            | 6.15.0  |
| `generaltranslation` | 8.2.0   |

## 用法

### 根据 Date 自动选择时间单位

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

```jsx
import { RelativeTime } from "gt-react";

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


### 明确指定值和时间单位

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

```jsx
import { RelativeTime } from "gt-react";

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


### 在译文中

将 [`<RelativeTime>`](/docs/react/reference/components/relative-time) 包裹在 [`<T>`](/docs/react/reference/components/t) 中，以便将其纳入译文句子中：

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

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

## Hydration 安全

[`<RelativeTime>`](/docs/react/reference/components/relative-time) 会在本地计算相对时间，这可能会在服务器端渲染的应用中导致 Hydration 不匹配。为避免这种情况，请固定 `baseDate`：

```jsx
const now = new Date();

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

## 核心工具

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

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

## 链接

* [`<RelativeTime>` API 参考](/docs/react/reference/components/relative-time)
* [使用变量组件](/docs/react/guides/formatting-variables)
* [PR #1153](https://github.com/generaltranslation/gt/pull/1153)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.