Types
InlineTranslationOptions
InlineTranslationOptions 型のAPIリファレンス
概要
InlineTranslationOptions 型は、インライン翻訳に variables を渡し、そのレンダリング動作を指定するために使用します。
また、翻訳にコンテキストや識別子を付与することもできます。
useGT と msg を使って、インライン文字列翻訳に variables を渡します。
Buildtime Translation:
useGT と msg の翻訳はビルド時に実行されますが、variables が翻訳されることはありません。
代わりに、所定のフォーマットで翻訳内に挿入されます。
必ずデプロイガイドに従ってください。
リファレンス
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 各 value が文字列内のどこにマッピングされるかを、キーで示すオブジェクト。 |
$context | 翻訳のためにコンテンツへ文脈を提供する目的で、任意で variables オブジェクトに $context を変数として含めます。 |
$id | 翻訳エディタで使用する識別子を提供する目的で、任意で variables オブジェクトに $id を変数として含めます。 |
例
コンテキスト
文字列に文脈を付与するには、$context プロップを使用します。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, world!', { $context: 'フォーマルな挨拶' })}</div>;
};変数の受け渡し
文字列に変数を挿入するには、{variable-name} 構文を使用します。これは、変数の名称を中括弧で囲む記法です。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('こんにちは、{username}！今日はどうですか？', { username: 'Brian123' })}</div>;
};ICU メッセージ形式の使用
gt-react は ICU メッセージ形式をサポートしており、variables のフォーマットも行えます。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>
{ t(
'アカウント残高: {dollars, number, ::currency/USD}',
{
"dollars" : 1000000,
}
) }
</div>;
};ICU メッセージ形式の詳細は、ICU メッセージ形式のドキュメントを参照してください。
注意事項
InlineTranslationOptionsはインライン文字列の翻訳に使用します。variablesオブジェクトはテキストに値を渡します。variablesOptionsオブジェクトは variables の挙動を定義します。
次のステップ
- インライン文字列の翻訳については
useGTを参照してください。 - フォーマットのoptionsの詳細については
ICU message formatを参照してください。
このガイドはいかがですか?