RuntimeTranslationOptions
RuntimeTranslationOptions 类型的 API 参考
概览
RuntimeTranslationOptions 类型用于向内联翻译传入变量并指定其渲染行为。
你也可以添加一个 locale 来指定用于翻译的另一种语言。
这与 tx 函数配合使用。
运行时翻译:
若要按需翻译变量,请将其直接写入传递给 tx 的字符串中。
通过 options 对象传递给 tx 的变量不会被翻译。
参考资料
参数
Prop
Type
描述
| Prop | 描述 |
|---|---|
variables | 一个对象,其中的键用于标识每个值在字符串中的映射位置。 |
$locale | 可在 variables 对象中将 $locale 作为变量传入,用于为翻译指定一个 locale。若未指定,将默认使用浏览器所偏好的、且被您的应用支持的最高优先级 locale。 |
示例
传递变量
要在字符串中插入变量,我们使用 {variable-name} 语法,其中花括号包裹变量的名称。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{tx(`你好,{username}!`,{ username: 'Brian123' })}
</div>;
};使用 ICU 消息格式
gt-next 支持 ICU 消息格式,可用于格式化变量。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{ tx(
'您的账户余额为:{dollars, number, ::currency/USD}',
{
"dollars" : 1000000,
}
) }
</div>;
};翻译变量
要翻译变量,只需将其直接写入传给 tx 的字符串中。
import { tx } from 'gt-next/server';
const Component = ({ hairColor }: { hairColor: string }) => {
return <div>{tx(
`你好,{username}!你的发色是${hairColor}`,
{ username: 'Brian123' }
)}</div>;
};请注意,变量 hairColor 会被翻译,而 username 不会。
指定 locale
你可以指定要用于翻译的 locale。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>{tx('你好,世界!', { $locale: 'fr' })}</div>;
};这将始终被翻译成法语。
注意
RuntimeTranslationOptions用于在运行时进行字符串翻译。variables对象向文本传递值。variablesOptions对象定义变量的行为。
后续步骤
本指南如何?