useGT()

概述

useGT() 函数是一个用于在构建时翻译字符串的钩子。

const t = useGT();

<p>{  t('This text will be translated')  }</p>;

构建时翻译： useGT() 翻译发生在构建时，即在您的应用部署之前。虽然您可以向翻译字符串传递变量，但您只能翻译在构建时已知的内容。

参考

参数

无

返回值

一个回调函数 t()，用于翻译提供的内容。

(content: string, options?: InlineTranslationOptions) => string

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

行为

生产环境

在 CD 过程中，t() 函数内的任何内容都会在应用程序部署之前进行翻译。这确保了所有语言环境的快速加载时间，但它只能翻译构建时已知的内容。

生成后，翻译内容会根据您的配置 (1) 存储在 CDN 中或 (2) 存储在应用程序的构建输出中。然后，翻译后的内容会提供给您的用户。如果找不到翻译，它将回退到原始内容。

请确保遵循此处的部署指南。

开发环境

在开发过程中，t() 函数会按需翻译内容。这对于原型设计您的应用程序在不同语言中的外观很有用。记住在您的环境中添加 Dev API 密钥以启用此行为。

在开发中进行按需翻译时您会看到延迟。这在生产构建中不会发生，除非内容被明确地按需翻译，即使用 tx() 或 <Tx>。

示例

基本用法

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

import { useGT } from 'gt-next';

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

  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

注意："Alice" 将被翻译为用户的首选语言。

使用变量

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

import { useGT } from 'gt-next';

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

  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

注意："Alice" 不会被翻译为用户的首选语言，因为它是一个变量。

使用 ICU 消息格式

gt-next 支持 ICU 消息格式，这允许你同时格式化你的变量。

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 })}
    </p>
  );
}

ICU 消息格式是格式化变量的强大方式。更多信息请参见 ICU 消息格式文档。

注意事项

useGT() 函数是一个用于翻译字符串的钩子。
使用 useGT() 进行的翻译字符串在运行时之前发生，在构建过程中进行（除非在开发环境中）。

下一步

查看 getGT() 了解构建时异步字符串翻译。
对于运行时翻译，请查看 tx() 和 <Tx>。
查看 InlineTranslationOptions 了解更多关于自定义翻译的信息。

useGT()

在本页面