RuntimeTranslationOptions

概要

RuntimeTranslationOptions型は、インライン翻訳に変数を渡し、そのレンダリング動作を指定するために使用されます。翻訳に異なる言語を指定するためにロケールを追加することもできます。これはtx()関数と一緒に使用されます。

ランタイム翻訳: 変数をオンデマンドで翻訳するには、tx()に渡される文字列に直接含めてください。 optionsオブジェクトを介してtx()に渡される変数は翻訳されません。

リファレンス

パラメータ

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

説明

プロパティ	説明
`variables`	キーが文字列内の各値のマッピング先を識別するオブジェクト。
`$locale`	翻訳のロケールを指定するために、オプションで`variables`オブジェクトに`$locale`を変数として含めることができます。アプリでサポートされているブラウザの最も優先されるロケールがデフォルトになります。

例

変数の渡し方

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

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ username: 'Brian123' })}
  </div>;
};

ICUメッセージフォーマットの使用

gt-next はICUメッセージフォーマットをサポートしており、変数をフォーマットすることもできます。

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

変数の翻訳

変数を翻訳するには、tx() に渡す文字列に直接含めます。

Component.tsx

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

変数 hairColor は翻訳されますが、username は翻訳されないことに注意してください。

ロケールの指定

翻訳に使用するロケールを指定できます。

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};

これは常にフランス語に翻訳されます。

Notes

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

次のステップ

インライン文字列翻訳の詳細については、tx()を参照してください。
フォーマットオプションの詳細については、ICU message formatを参照してください。

RuntimeTranslationOptions

このページについて