InlineTranslationOptions

概要

InlineTranslationOptions型は、インライン翻訳に変数を渡し、そのレンダリング動作を指定するために使用されます。翻訳にコンテキストと識別子を追加することもできます。これはuseGT()と組み合わせて使用し、インライン文字列翻訳に変数を渡します。

ビルドタイム翻訳: useGT()翻訳はビルドタイムに発生しますが、変数は決して翻訳されません。代わりに、フォーマットを使用して翻訳に挿入されます。こちらのデプロイメントガイドに従うようにしてください。

リファレンス

パラメータ

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`

説明

プロパティ	説明
`variables`	各値が文字列内のどこにマッピングされるかを識別するキーを持つオブジェクト。
`$context`	オプションで`variables`オブジェクトに`$context`を変数として含めて、コンテンツのコンテキストを提供する（翻訳に使用）。
`$id`	オプションで`variables`オブジェクトに`$id`を変数として含めて、翻訳エディタで使用する識別子を提供する。

例

コンテキスト

文字列にコンテキストを追加するために、$context プロパティを使用します。

Component.tsx

import { useGT } from 'gt-react';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, world!', { $context: 'a formal greeting' })}</div>;
};

変数の渡し方

文字列に変数を追加するために、{variable-name} 構文を使用します。ここで、波括弧が変数名を囲みます。

Component.tsx

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 メッセージフォーマットをサポートしており、変数をフォーマットすることも可能です。

Component.tsx

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を参照してください。

InlineTranslationOptions

このページについて