RuntimeTranslationOptions

概述

RuntimeTranslationOptions 类型用于向内联翻译传递变量并指定其渲染行为。您还可以添加区域设置来为翻译指定不同的语言。这与 tx() 函数一起使用。

运行时翻译： 要按需翻译变量，请将它们直接包含在传递给 tx() 的字符串中。通过 options 对象传递给 tx() 的变量不会被翻译。

参考

参数

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

描述

属性	描述
`variables`	一个对象，其中的键标识每个值在字符串中映射到的位置。
`$locale`	可选择在 `variables` 对象中包含 `$locale` 作为变量来指定翻译的语言环境。将默认为您的应用支持的浏览器最首选的语言环境。

示例

传递变量

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

Component.tsx

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

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

使用 ICU 消息格式

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

Component.tsx

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

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

翻译变量

为了翻译变量，请将其直接包含在传递给 tx() 的字符串中。

Component.tsx

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

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

注意变量 hairColor 会被翻译，但 username 不会。

指定语言环境

您可以指定用于翻译的语言环境。

Component.tsx

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

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};

这将始终翻译为法语。

注意事项

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

下一步

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

RuntimeTranslationOptions

在本页面