Types
InlineTranslationOptions
InlineTranslationOptions 型の APIリファレンス
概要
InlineTranslationOptions 型は、インライン翻訳に variables を渡し、そのレンダリング動作を指定するために使用します。
翻訳にコンテキストや識別子を付与することもできます。
これは、インライン文字列翻訳に variables を渡すために useGT および msg と組み合わせて使用します。
Buildtime Translation:
useGT と msg の翻訳はビルド時に実行されますが、variables は翻訳されません。
代わりに、書式設定されたうえで翻訳文中に挿入されます。
必ずこちらのデプロイガイドに従ってください。
リファレンス
パラメーター
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 文字列内で各値をどこにマッピングするかを示すキーを持つオブジェクト。 |
$context | 翻訳用にコンテンツの文脈を提供するため、variables オブジェクトに変数として $context を任意で含められます。 |
$id | 翻訳エディタで使用する識別子を提供するため、variables オブジェクトに変数として $id を任意で含められます。 |
例
コンテキスト
文字列に文脈を付与するには、$context プロパティを使用します。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('皆さま、こんにちは。', { $context: '丁重な挨拶' })}</div>;
};変数の受け渡し
文字列に変数を挿入するには、{variable-name} 構文を使います。変数名を中括弧で囲む書き方です。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('こんにちは、{username}。今日はどんな一日ですか？', { username: 'Brian123' })}</div>;
};ICU message format の使用
gt-react は ICU message format をサポートしており、variables の値もフォーマットできます。
import { useGT } from 'gt-react';
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を参照してください。 - 形式設定の options については
ICU message formatを参照してください。
このガイドはどうでしたか？