InlineTranslationOptions

概要

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

ビルドタイム翻訳: 変数はuseGT()とgetGT()では翻訳されず、元の文字列のみが翻訳されます。動的コンテンツを含む文字列の翻訳についてはtx()を参照してください。

リファレンス

パラメータ

Prop	Type	Default
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`
`variables??`	`Record<string, any>`	`undefined`
`id??`	`string`	`undefined`
`context??`	`string`	`undefined`

説明

プロパティ	説明
`context`	コンテンツのコンテキスト（翻訳に使用されます）。
`id`	翻訳エディターで使用するオプションの識別子。
`variables`	キーが文字列内の各値のマッピング先を識別するオブジェクト。
`variablesOptions`	キーが変数を識別し、値が変数の動作を定義するオブジェクト。詳細については、`Intl.NumberFormatOptions` および `Intl.DateTimeFormatOptions` を参照してください。

例

コンテキスト

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

Component.tsx

import { useGT } from 'gt-next';

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

変数の渡し方

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

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>{t('Hello, {username}! How is your day?', { variables: { 'username' : 'Brian123' } })}</div>;
};

変数オプションの追加

variablesOptions プロパティを使用して、変数のレンダリング方法をカスタマイズすることもできます。

Component.tsx

import { useGT } from 'gt-next';

const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'Your account balance: {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Notes

InlineTranslationOptionsは文字列翻訳に使用されます。
variablesオブジェクトはテキストに値を渡します。
variablesOptionsオブジェクトは変数の動作を定義します。

次のステップ

インライン文字列翻訳の詳細については、useGT()とgetGT()を参照してください。
フォーマットオプションの詳細については、Intl.NumberFormatOptionsとIntl.DateTimeFormatOptionsを参照してください。

InlineTranslationOptions

このページについて