Types
DictionaryTranslationOptions
DictionaryTranslationOptions 型のAPIリファレンス
概要
DictionaryTranslationOptions 型は、dictionary のエントリに variables を渡し、そのレンダー動作を指定するために使用されます。
これは useTranslations と併用し、dictionary のエントリに variables を渡します。
Buildtime Translation:
useTranslations の翻訳はビルド時に行われます。ただし、variables は翻訳されません。
代わりに、適切な書式で翻訳内に挿入されます。
必ずこちらのデプロイガイドに従ってください。
参考
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | キーによって、各値がdictionaryのエントリ内のどこに対応（マッピング）するかを示すオブジェクト。 |
例
variables の受け渡し
dictionary のエントリに変数を渡すには、次の2点が必要です。(1) エントリに変数を追加し、(2) d の呼び出しでその変数を参照します。
まず、次の構文で dictionary のエントリに変数を追加します: {username}。
username は変数の名前です。
const dictionary = {
greeting: {
hello: 'こんにちは、{username}さん！',
},
};
export default dictionary;次に、変数を参照します。
import { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>{d('greeting.hello', { username : 'Brian123' })}</div>;
};ICU message format の使用
gt-react は ICU message format をサポートしており、variables の値も整形できます。
const dictionary = {
account: {
balance: '口座残高：{dollars, number, ::currency/USD}',
},
};
export default dictionary;次に、変数を参照します。
import { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>
{ d(
'account.balance',
{
"dollars" : 1000000,
}
) }
</div>;
};注意事項
variablesオブジェクトは、値を dictionary の Entry に渡します。variablesOptionsオブジェクトは、variablesの動作を定義します。
次のステップ
- dictionaries で、dictionaries と一般的なベストプラクティスの詳細を確認してください。
useTranslationsで、dictionaries のインターフェースの詳細を確認してください。ICU message formatで、フォーマットの options の詳細を確認してください。
このガイドはどうでしたか？