DictionaryTranslationOptions

概要

DictionaryTranslationOptions型は、辞書エントリに変数を渡し、そのレンダリング動作を指定するために使用されます。 useTranslations()とgetTranslations()と組み合わせて使用し、辞書エントリに変数を渡します。

ビルド時翻訳: 変数はuseTranslations()とgetTranslations()では翻訳されず、元の文字列のみが翻訳されます。動的コンテンツを含む文字列の翻訳についてはtx()を参照してください。

リファレンス

パラメータ

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

説明

プロパティ	説明
`variables`	各値が辞書エントリのどこにマッピングされるかをキーで識別するオブジェクト。

例

変数の渡し方

辞書エントリに変数を渡すには、2つのことを行う必要があります：(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>;
};

Notes

variablesオブジェクトは辞書エントリに値を渡します。
variablesOptionsオブジェクトは変数の動作を定義します。

次のステップ

辞書と一般的な慣行についての詳細はdictionariesを参照してください。
辞書インターフェースについての詳細はuseTranslations()またはgetTranslations()を参照してください。
フォーマットオプションについての詳細はICU message formatを参照してください。

DictionaryTranslationOptions

このページについて