博客Dashboard
Inline Translations

useGT

`useGT` 字符串翻译函数的 API 参考

概览

useGT 函数是一个在构建阶段用于翻译字符串的 hook。

const t = useGT();

<p>{  t('此文本将被翻译为目标语言')  }</p>;

构建时翻译： useGT 的翻译在构建阶段完成，先于应用部署。 虽然你可以向已翻译的字符串传入变量，但只能翻译在构建时已知的内容。

参考资料

参数

无

返回值

一个回调函数 t，用于翻译传入的内容。

(content: string, options?: InlineTranslationOptions) => string
名称类型描述
contentstring待翻译的字符串内容。
options?InlineTranslationOptions用于自定义 t 行为的翻译选项。

行为

生产环境

在 CD 过程中，任何位于 t 函数中的内容都会在应用部署前完成翻译。 这可确保所有 locale 的快速加载，但只能翻译构建时已知的内容。

生成后，翻译将根据你的配置被 (1) 存储在 CDN（内容分发网络）中，或 (2) 存储在应用的构建产物中。 随后，译文将提供给你的用户。 如果未找到翻译，将回退到原始内容。

请务必遵循此处的部署指南。

开发

在开发过程中，t 函数会按需翻译内容。 这有助于为应用在不同语言下的呈现进行原型设计。 请记得在环境中添加 Dev API key 以启用此功能。

在开发环境中进行按需翻译时可能会有延迟。 在生产构建中不会出现这种情况。

示例

基本用法

可以使用 useGT 来翻译字符串。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('你好，Alice！')}
    </p>
  );
}

注意：“Alice”将根据用户的首选语言进行翻译。

使用变量

你可以向字典中的翻译传递变量。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('你好，{name}！', { name: 'Alice' })}
    </p>
  );
}

注意：“Alice”不会根据用户的首选语言进行翻译，因为它是一个变量。

使用 ICU 消息格式

gt-react 支持 ICU 消息格式，可用于对变量进行格式化。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('购物车中{count, plural, =0 {没有商品} =1 {有1件商品} other {有{count}件商品}}', { count: 10 })}
    </p>
  );
}

ICU 消息格式是格式化变量的强大方式。 详情请参阅 ICU 消息格式文档。

注意事项

  • useGT 函数是用于翻译字符串的 hook。
  • useGT 只能在由 <GTProvider> 组件 包裹的组件内使用。
  • 使用 useGT 的翻译会在构建阶段完成（开发环境除外），而非在运行时。

后续步骤

本指南如何?

LocaleSelector

<LocaleSelector> 组件 API 参考

msg

msg() 字符串函数 API 参考

本页目录

概览
参考资料
参数
返回值
行为
生产环境
开发
示例
基本用法
使用变量
使用 ICU 消息格式
注意事项
后续步骤