Types

DictionaryTranslationOptions

DictionaryTranslationOptions 类型的 API 参考

概览

DictionaryTranslationOptions 类型用于向字典条目传递变量并指定其渲染行为。 它与 useTranslationsgetTranslations 搭配使用,以向字典条目传递变量。

构建时翻译: 使用 useTranslationsgetTranslations 时不会对变量进行翻译,只有原始字符串会被翻译。 如需翻译包含动态内容的字符串,请参阅 tx

参考资料

参数

Prop

Type

描述

Prop描述
variables一个对象,其中的键用于指明各个值在字典项中的映射位置。

示例

传递变量

要向字典条目传入变量,需要完成两步:(1) 在该条目中添加一个变量;(2) 在调用 d 时引用该变量。

首先,使用以下语法将变量添加到字典条目:{username}username 是该变量的名称。

dictionary.ts
const dictionary = {
  greeting: {
    hello: '你好,{username}!',
  },
};

export default dictionary;

接下来,我们来引用该变量:

Component.tsx
import { useTranslations } from 'gt-next';

const Component = () => {
  const d = useTranslations();
  return <div>{d('greeting.hello', { username : 'Brian123' })}</div>;
};

使用 ICU 消息格式

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

dictionary.ts
const dictionary = {
  account: {
    balance: '您的账户余额:{dollars, number, ::currency/USD}!',
  },
};

export default dictionary;

接下来引用该变量:

Component.tsx
import { useTranslations } from 'gt-next';

const Component = () => {
  const d = useTranslations();
  return <div>
    { d(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

注意事项

  • variables 对象会向字典条目传递值。
  • variablesOptions 对象用于定义这些变量的行为。

后续步骤

这份指南怎么样?

DictionaryTranslationOptions