# General Translation Changelog: gt-next 6.15.0: 所有 React 软件包均支持 `<RelativeTime>`
URL: https://generaltranslation.com/zh/blog/gt-next_v6_15_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Archie McKenzie
Published: 2026-04-01

## 概述

现在，所有 GT React 软件包都已提供新的 [`<RelativeTime>`](/docs/react/reference/components/relative-time) 组件。它使用浏览器内置的 `Intl.RelativeTimeFormat` API 来渲染本地化的相对时间字符串，例如“2 小时前”或“3 天后”。

| 软件包                  | 版本      | 导出                                                                                                                               |
| -------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `gt-next`            | 6.15.0  | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (客户端 + 服务器端)                                                  |
| `gt-react`           | 10.16.0 | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (客户端)                                                         |
| `gt-tanstack-start`  | 0.3.0   | [`<RelativeTime>`](/docs/react/reference/components/relative-time) (客户端)                                                         |
| `generaltranslation` | 8.2.0   | [`formatRelativeTimeFromDate()`](/docs/platform/core/reference/utility-functions/formatting/format-relative-time-from-date) (核心) |
| `gt` (CLI)           | 2.14.0  | [`RelativeTime`](/docs/react/reference/components/relative-time) 组件检测                                                            |

## 用法

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

传入 `Date` 后，组件会自动选择最合适的时间单位 (秒、分钟、小时、天、周、月或年) 。

```tsx
import { RelativeTime } from 'gt-next';

export default function PostTimestamp({ post }) {
  return <RelativeTime>{post.createdAt}</RelativeTime>;
  // "2小时前"、"3天前"、"5分钟后"，等等。
}
```


### 显式指定值和时间单位

指定精确的数值和时间单位，直接对应 `Intl.RelativeTimeFormat` 的用法。

```tsx
import { RelativeTime } from 'gt-next';

export default function Reminder() {
  return (
    <p>
      Your trial ends <RelativeTime value={3} unit="day" />.
    </p>
  );
  // "您的试用期将在 3 天后结束。"
}
```


### 在翻译后的内容中

将 [`<RelativeTime>`](/docs/react/reference/components/relative-time) 包裹在 [`<T>`](/docs/react/reference/components/t) 组件中，以便将其包含在翻译后的句子中。

```tsx
import { T, RelativeTime } from 'gt-next';

export default function Comment({ comment }) {
  return (
    <T id="commentPosted">
      Posted <RelativeTime>{comment.createdAt}</RelativeTime>
    </T>
  );
}
```

### 核心函数

对于非组件场景，请使用独立函数：

```ts
import { formatRelativeTimeFromDate } from 'generaltranslation';

const label = formatRelativeTimeFromDate(someDate, {
  locales: ['en-US'],
  baseDate: new Date(),
});
// "2小时前"
```


## Hydration 安全性

[`<RelativeTime>`](/docs/react/reference/components/relative-time) 会在本地计算相对时间，这可能导致服务器端渲染应用出现 hydration 不一致。请固定 `baseDate` 和 `locales`，以保持服务器端与客户端同步：

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

<RelativeTime baseDate={now} locales={['en-US']}>
  {post.createdAt}
</RelativeTime>
```

## 链接

* [PR #1153 — feat: 新增 `<RelativeTime>` 组件](https://github.com/generaltranslation/gt/pull/1153)
* [`<RelativeTime>` docs](/docs/react/reference/components/relative-time)

## Sitemap

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