Types
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 消息格式，可用于格式化 variables。
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('Bonjour, le monde !', { $locale: 'fr' })}</div>;
};这将始终被翻译为法语。
说明
RuntimeTranslationOptions用于在运行时执行字符串翻译。variables对象向文本传递值。variablesOptions对象用于定义变量的行为。
后续步骤
- 查看
tx以了解更多行内字符串翻译的信息。 - 查看
ICU message format以了解更多关于格式化 options 的信息。
这份指南怎么样？