Types

RuntimeTranslationOptions

RuntimeTranslationOptions 类型的 API 参考

概览

RuntimeTranslationOptions 类型用于向内联翻译传入变量并指定其渲染行为。 你也可以添加一个 locale 来指定用于翻译的另一种语言。 这与 tx 函数配合使用。

运行时翻译: 若要按需翻译变量,请将其直接写入传递给 tx 的字符串中。 通过 options 对象传递给 tx 的变量不会被翻译。

参考资料

参数

Prop

Type

描述

Prop描述
variables一个对象,其中的键用于标识每个值在字符串中的映射位置。
$locale可在 variables 对象中将 $locale 作为变量传入,用于为翻译指定一个 locale。若未指定,将默认使用浏览器所偏好的、且被您的应用支持的最高优先级 locale。

示例

传递变量

要在字符串中插入变量,我们使用 {variable-name} 语法,其中花括号包裹变量的名称。

Component.tsx
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`你好,{username}!`,{ username: 'Brian123' })}
  </div>;
};

使用 ICU 消息格式

gt-next 支持 ICU 消息格式,可用于格式化变量。

Component.tsx
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      '您的账户余额为:{dollars, number, ::currency/USD}',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

翻译变量

要翻译变量,只需将其直接写入传给 tx 的字符串中。

Component.tsx
import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `你好,{username}!你的发色是${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

请注意,变量 hairColor 会被翻译,而 username 不会。

指定 locale

你可以指定要用于翻译的 locale。

Component.tsx
import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('你好,世界!', { $locale: 'fr' })}</div>;
};

这将始终被翻译成法语。


注意

  • RuntimeTranslationOptions 用于在运行时进行字符串翻译。
  • variables 对象向文本传递值。
  • variablesOptions 对象定义变量的行为。

后续步骤

  • 请参阅 tx 以了解内联字符串翻译的更多信息。
  • 请参阅 ICU 消息格式 以了解更多格式化选项。

本指南如何?