InlineTranslationOptions
InlineTranslationOptions 类型 API 参考
概述
InlineTranslationOptions 类型用于向内联翻译传递变量并指定其渲染行为。
你还可以为翻译添加上下文和标识符。
它与 useGT 和 msg 搭配使用,用于向内联字符串翻译传递变量。
构建时翻译:
useGT 和 msg 的翻译发生在构建时;但变量不会被翻译。
它们会以指定格式插入到翻译结果中。
请务必遵循此处的部署指南。
参考资料
参数
Prop
Type
描述
| Prop | 描述 |
|---|---|
variables | 一个对象,其中的键用于标识每个变量值在字符串中的映射位置。 |
$context | 可选:在 variables 对象中包含 $context 变量,为内容提供上下文(用于翻译)。 |
$id | 可选:在 variables 对象中包含 $id 变量,提供供翻译编辑器使用的标识符。 |
示例
上下文
要为字符串提供上下文,请使用 $context 属性。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('您好,世界!', { $context: '正式问候' })}</div>;
};传递变量
要在字符串中添加变量,我们使用 {variable-name} 语法,其中花括号包裹变量名称。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('你好,{username}!你今天过得怎么样?', { username: 'Brian123' })}</div>;
};使用 ICU 消息格式
gt-react 支持 ICU 消息格式,可用于格式化变量。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>
{ t(
'您的账户余额:{dollars, number, ::currency/USD}!',
{
"dollars" : 1000000,
}
) }
</div>;
};有关 ICU 消息格式的更多信息,请参阅 ICU 消息格式文档。
说明
InlineTranslationOptions用于内联字符串的翻译。variables对象向文本传递 value。variablesOptions对象用于定义变量的行为。
下一步
本指南如何?