Types
InlineTranslationOptions
InlineTranslationOptions型のAPIリファレンス
概要
InlineTranslationOptions
型は、インライン翻訳に変数を渡し、そのレンダリング動作を指定するために使用されます。
翻訳にコンテキストと識別子を追加することもできます。
これはuseGT()
と組み合わせて使用し、インライン文字列翻訳に変数を渡します。
ビルドタイム翻訳:
useGT()
翻訳はビルドタイムに発生しますが、変数は決して翻訳されません。
代わりに、フォーマットを使用して翻訳に挿入されます。
こちらのデプロイメントガイドに従うようにしてください。
リファレンス
パラメータ
Prop | Type | Default |
---|---|---|
variables?? | Record<string, any> | undefined |
説明
プロパティ | 説明 |
---|---|
variables | 各値が文字列内のどこにマッピングされるかを識別するキーを持つオブジェクト。 |
$context | オプションでvariables オブジェクトに$context を変数として含めて、コンテンツのコンテキストを提供する(翻訳に使用)。 |
$id | オプションでvariables オブジェクトに$id を変数として含めて、翻訳エディタで使用する識別子を提供する。 |
例
コンテキスト
文字列にコンテキストを追加するために、$context
プロパティを使用します。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};
変数の渡し方
文字列に変数を追加するために、{variable-name}
構文を使用します。ここで、波括弧が変数名を囲みます。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>{t('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
ICU メッセージフォーマットの使用
gt-react
は ICU メッセージフォーマットをサポートしており、変数をフォーマットすることも可能です。
import { useGT } from 'gt-react';
const Component = () => {
const t = useGT();
return <div>
{ t(
'Your account balance: {dollars, number, ::currency/USD}!',
{
"dollars" : 1000000,
}
) }
</div>;
};
ICU メッセージフォーマットの詳細については、ICU メッセージフォーマットドキュメントを参照してください。
Notes
InlineTranslationOptions
は文字列翻訳に使用されます。variables
オブジェクトはテキストに値を渡します。variablesOptions
オブジェクトは変数の動作を定義します。
次のステップ
- インライン文字列翻訳の詳細については、
useGT()
を参照してください。 - フォーマットオプションの詳細については、
ICU message format
を参照してください。
このガイドはいかがですか?