Types
InlineTranslationOptions
InlineTranslationOptions 型のAPIリファレンス
概要
InlineTranslationOptions 型は、インライン翻訳に variables を渡し、そのレンダリング動作を指定するために使用します。
翻訳にコンテキストや識別子を追加することもできます。
useGT、getGT、msg と併用して、インラインの文字列翻訳に variables を渡します。
Buildtime Translation:
useGT、getGT、msg では variables は翻訳されず、元の文字列のみが対象です。
動的コンテンツを含む文字列を翻訳する場合は、tx を参照してください。
リファレンス
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 各値を文字列内の対応箇所にマッピングするためのキーを持つオブジェクト。 |
$context | 翻訳に用いるコンテンツの文脈を提供するために、variables オブジェクトに任意で $context を変数として含めます。 |
$id | 翻訳エディタで使用する識別子を提供するために、variables オブジェクトに任意で $id を変数として含めます。 |
例
コンテキスト
文字列に文脈を付与するには、$context プロパティを使用します。
import { useGT } from 'gt-next';
const Component = () => {
const t = useGT();
return <div>{t('皆さま、こんにちは。', { $context: '丁重な挨拶' })}</div>;
};変数の受け渡し
文字列に変数を挿入するには、{variable-name} 構文を使用します。波括弧で変数名を囲みます。
import { useGT } from 'gt-next';
const Component = () => {
const t = useGT();
return <div>{t('こんにちは、{username}さん！今日はどうですか？', { username: 'Brian123' })}</div>;
};ICU message format を使用する
gt-next は ICU message format をサポートしており、variables のフォーマットも行えます。
import { useGT } from 'gt-next';
const Component = () => {
const t = useGT();
return <div>
{ t(
'口座残高：{dollars, number, ::currency/USD}です！',
{
"dollars" : 1000000,
}
) }
</div>;
};ICU message format の詳細は、ICU message format のドキュメントをご参照ください。
注意事項
InlineTranslationOptionsはインライン文字列の翻訳に使用します。variablesオブジェクトはテキストに値を渡します。variablesOptionsオブジェクトはvariablesの挙動を定義します。
次のステップ
- インライン文字列の翻訳については
useGTとgetGTを参照してください。 - フォーマット用の options の詳細は
ICU message formatを参照してください。
このガイドはどうでしたか？