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