InlineTranslationOptions

概要

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

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

リファレンス

パラメーター

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

説明

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

例

コンテキスト

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

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>{t('こんにちは、世界！', { context: '正式な挨拶' })}</div>;
};

変数の渡し方

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

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>{t('こんにちは、{username}！今日はどうですか？', { variables: { 'username' : 'Brian123' } })}</div>;
};

変数オプションの追加

variablesOptions プロップを使用して、変数の表示方法をカスタマイズすることもできます。

Component.tsx

import { useGT } from 'gt-react';
 
const Component = () => {
  const t = useGT();
  return <div>
    { t(
      'あなたの口座残高: {account-balance}!',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

ノート

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

次のステップ

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

InlineTranslationOptions

このページについて