返回

gt-next@6.15.0

Archie McKenzie avatarArchie McKenzie
gt-nextgt-reactgt-tanstack-startrelative-timecomponents

概述

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

软件包版本导出
gt-next6.15.0<RelativeTime> (客户端 + 服务器端)
gt-react10.16.0<RelativeTime> (客户端)
gt-tanstack-start0.3.0<RelativeTime> (客户端)
generaltranslation8.2.0formatRelativeTimeFromDate() (核心)
gt (CLI)2.14.0RelativeTime 组件检测

用法

根据 Date 自动选择时间单位

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

import { RelativeTime } from 'gt-next';

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

显式指定值和时间单位

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

import { RelativeTime } from 'gt-next';

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

在翻译后的内容中

将 <RelativeTime> 包裹在 <T> 组件中，以便将其包含在翻译后的句子中。

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

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

核心函数

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

import { formatRelativeTimeFromDate } from 'generaltranslation';

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

Hydration 安全性

<RelativeTime> 会在本地计算相对时间，这可能导致服务器端渲染应用出现 hydration 不一致。请固定 baseDate 和 locales，以保持服务器端与客户端同步：

const now = new Date();

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

链接