Types
DictionaryTranslationOptions
DictionaryTranslationOptions 型のAPIリファレンス
概要
DictionaryTranslationOptions 型は、dictionary のエントリに variables を渡し、そのレンダリング動作を指定するために使用されます。
これは useTranslations および getTranslations と併用して、dictionary エントリに variables を渡します。
Buildtime Translation:
useTranslations および getTranslations では variables は翻訳されず、元の文字列のみが翻訳対象です。
動的コンテンツを含む文字列を翻訳する場合は、tx を参照してください。
リファレンス
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 各valueがdictionaryのEntry内のどこにマッピングされるかをキーで示すオブジェクト。 |
例
変数の受け渡し
dictionary のエントリーに変数を渡すには、(1) エントリーに変数を追加し、(2) d の呼び出しでその変数を参照する、という2つの手順が必要です。
まず、次の構文で dictionary のエントリーに変数を追加します: {username}。
username は変数の名称です。
const dictionary = {
greeting: {
hello: '{username}さん、こんにちは！',
},
};
export default dictionary;次に、Variable を参照します。
import { useTranslations } from 'gt-next';
const Component = () => {
const d = useTranslations();
return <div>{d('greeting.hello', { username : 'Brian123' })}</div>;
};ICU メッセージ形式の使用
gt-next は ICU メッセージ形式をサポートしており、variables も整形できます。
const dictionary = {
account: {
balance: '口座残高：{dollars, number, ::currency/USD}',
},
};
export default dictionary;次に、Variable を参照します：
import { useTranslations } from 'gt-next';
const Component = () => {
const d = useTranslations();
return <div>
{ d(
'account.balance',
{
"dollars" : 1000000,
}
) }
</div>;
};注意事項
variablesオブジェクトは、dictionary の Entry に value を渡します。variablesOptionsオブジェクトは、variables の動作を定義します。
次のステップ
- dictionaries で、dictionary と一般的なプラクティスの詳細をご確認ください。
useTranslationsまたはgetTranslationsで、dictionary のインターフェースに関する詳細をご確認ください。ICU message formatで、formatting options の詳細をご確認ください。
このガイドはいかがですか?