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('Hello, world!', { $context: 'フォーマルな挨拶' })}</div>;
};変数の受け渡し
文字列に変数を追加するには、{variable-name} 構文を使用します。波括弧で変数の名称を囲みます。
import { useGT } from 'gt-next';
const Component = () => {
const t = useGT();
return <div>{t('こんにちは、{username}さん！今日はどうですか？', { username: 'Brian123' })}</div>;
};ICU メッセージ形式の使用
gt-next は ICU メッセージ形式をサポートしており、variables のフォーマットにも対応しています。
import { useGT } from 'gt-next';
const Component = () => {
const t = useGT();
return <div>
{ t(
'アカウント残高: {dollars, number, ::currency/USD}',
{
"dollars" : 1000000,
}
) }
</div>;
};ICU メッセージ形式の詳細は、ICU メッセージ形式のドキュメントを参照してください。
注意事項
InlineTranslationOptionsはインライン文字列の翻訳に使用します。variablesオブジェクトはテキストに値を渡します。variablesOptionsオブジェクトはvariablesの挙動を定義します。
次のステップ
- インライン文字列の翻訳については、
useGTとgetGTを参照してください。 - フォーマット用の options の詳細については、
ICU message formatを参照してください。
このガイドはいかがですか?