DictionaryTranslationOptions

概述

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

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

参考

参数

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

描述

Prop	描述
`variables`	一个对象，其中的键标识每个值在字典条目中的映射位置。
`variablesOptions`	一个对象，其中的键标识变量，值定义变量的行为。有关更多信息，请参见 `Intl.NumberFormatOptions` 和 `Intl.DateTimeFormatOptions`。

示例

传递变量

为了将变量传递给字典条目，我们需要做两件事：（1）在条目中添加一个变量，并且（2）在d()调用中引用该变量。

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

dictionary.ts

const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};
 
export default dictionary;

接下来，我们引用变量：

Component.tsx

import { useDict } from 'gt-next/client';
 
const Component = () => {
  const d = useDict();
  return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};

添加变量选项

变量选项允许您自定义变量的呈现方式。它使用与variables对象相同的语法。

dictionary.ts

const dictionary = {
  account: {
    balance: 'Your account balance: {account-balance}!',
  },
};
 
export default dictionary;

接下来，我们引用变量：

Component.tsx

import { useDict } from 'gt-next/client';
 
const Component = () => {
  const d = useDict();
  return <div>
    { d(
      'account.balance',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

注意事项

variables 对象将值传递给字典条目。
variablesOptions 对象定义了变量的行为。

下一步

查看 dictionaries 以获取有关字典和常见实践的更多信息。
查看 useDict() 或 getDict() 以获取有关字典接口的更多信息。
查看 Intl.NumberFormatOptions 和 Intl.DateTimeFormatOptions 以获取有关格式选项的更多信息。

DictionaryTranslationOptions

在本页面