DictionaryTranslationOptions

概要

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

ビルド時翻訳: useTranslations()の翻訳はビルド時に行われますが、変数は翻訳されません。代わりに、フォーマットされた状態で翻訳に挿入されます。こちらのデプロイメントガイドに従ってください。

リファレンス

パラメータ

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-react';

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

ICUメッセージフォーマットの使用

gt-react はICUメッセージフォーマットをサポートしており、変数をフォーマットすることも可能です。

dictionary.ts

const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;

次に、変数を参照します：

Component.tsx

import { useTranslations } from 'gt-react';

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

注意事項

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

次のステップ

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

DictionaryTranslationOptions

このページについて