InlineTranslationOptions

概述

InlineTranslationOptions 类型用于向内联翻译传递变量并指定其渲染行为。您还可以为翻译添加上下文和标识符。它与 useGT() 和 getGT() 一起使用，向内联字符串翻译传递变量。

构建时翻译： 变量不会通过 useGT() 和 getGT() 进行翻译，只有原始字符串会被翻译。请参阅 tx() 来翻译包含动态内容的字符串。

参考

参数

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

描述

属性	描述
`variables`	一个对象，其中的键标识每个值在字符串中映射到的位置。
`$context`	可选择在 `variables` 对象中包含 `$context` 作为变量，为内容提供上下文（用于翻译）。
`$id`	可选择在 `variables` 对象中包含 `$id` 作为变量，提供一个标识符供翻译编辑器使用。

示例

上下文

为了给字符串添加上下文，我们使用 $context 属性。

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

传递变量

为了给字符串添加变量，我们使用 {variable-name} 语法，其中花括号包围变量的名称。

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};

使用 ICU 消息格式

gt-next 支持 ICU 消息格式，这允许您也可以格式化您的变量。

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

有关 ICU 消息格式的更多信息，请参阅 ICU 消息格式文档。

注意事项

InlineTranslationOptions 用于字符串翻译。
variables 对象将值传递给文本。
variablesOptions 对象定义变量的行为。

下一步

查看 useGT() 和 getGT() 了解更多关于内联字符串翻译的信息。
查看 ICU message format 了解更多关于格式化选项的信息。

InlineTranslationOptions

在本页面