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