DictionaryTranslationOptions

概述

DictionaryTranslationOptions 类型用于向字典条目传递变量并指定其渲染行为。它与 useTranslations() 和 getTranslations() 一起使用，向字典条目传递变量。

构建时翻译： 变量不会通过 useTranslations() 和 getTranslations() 进行翻译，只有原始字符串会被翻译。请参阅 tx() 来翻译包含动态内容的字符串。

参考

参数

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

描述

属性	描述
`variables`	一个对象，其中的键标识每个值在字典条目中的映射位置。

示例

传递变量

为了向字典条目传递变量，我们需要做两件事：(1) 向条目添加变量，(2) 在 d() 调用中引用该变量。

首先，我们使用以下语法向字典条目添加变量：{username}。 username 是变量的名称。

dictionary.ts

const dictionary = {
  greeting: {
    hello: '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: 'Your 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 对象定义变量的行为。

下一步

查看字典了解更多关于字典和常见实践的信息。
查看useTranslations()或getTranslations()了解更多关于字典接口的信息。
查看ICU message format了解更多关于格式化选项的信息。

DictionaryTranslationOptions

在本页面