<Tx>

概要

<Tx>コンポーネントは、jsxコンテンツを実行時に翻訳します。

<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx>

<Tx>コンポーネントは、プレーンテキストだけでなく複雑なJSX構造の翻訳もサポートします。さらに、変数、複数形、コンテキストに応じた翻訳の処理機能も提供します。 <Tx>はサーバーサイド専用です。

実行時翻訳: <Tx>の翻訳は実行時に行われます。つまり、翻訳はリアルタイムで実施されます。

リファレンス

プロップス

Prop	Type	Default
`locale??`	`string`	`undefined`
`context??`	`string`	`undefined`
`children?`	`any`	-

説明

プロップ	説明
`children`	翻訳されるコンテンツ。プレーンテキストやJSX構造を含めることができます。
`context`	翻訳をより正確にするための追加コンテキスト。曖昧な表現を解決するのに役立ちます。
`locale`	翻訳に使用するオプションのロケール。アプリがサポートするブラウザの最優先ロケールがデフォルトで使用されます。

挙動

<Tx> は、jsx を実行時に翻訳します。これは、翻訳がリアルタイムで行われることを意味し、実行時にのみ判明するコンテンツも翻訳できます。その代わりに、オンデマンド翻訳の読み込みを待つ間に遅延が発生し、かなり遅くなる場合があります。

読み込み中は、言語が類似している場合（en-US と en-GB など）を除き、<Tx> は undefined を返しますが、この挙動はレンダー設定でカスタマイズ可能です。エラーが発生した場合、<Tx> は元のコンテンツを返します。

私たちの推奨は、可能な限りビルド時に <T>、getGT()、または useGT() を使ってすべて翻訳し、必要な場合のみ <Tx> や tx() のようなオンデマンド翻訳を使用することです。

こちらのデプロイガイドに必ず従ってください。

例

基本的な使い方

<Tx> コンポーネントは、その子要素を実行時に翻訳します。

SimpleTranslation.jsx

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </Tx> 
    );
}

変数の使用

<Var> コンポーネントを使って、子要素を変数としてマークできます。これにより、翻訳されるべきでない内容を指定できます。

DynamicGreeting.jsx

import { Tx, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <Tx>
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}

複数形の対応

<T> コンポーネントは、<Plural> コンポーネントを使った複数形にも対応しています。

ItemCount.jsx

import { Tx, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

制限事項

<Tx> 関数は、その子孫のみを翻訳します。

Example.jsx

import { Tx } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <Tx>
            <div><b>This is valid!</b></div> // will be translated 

            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>

            <InvalidTranslation /> // will not be translated
        </Tx>
    );
}

注意: 良い目安として、ファイル内で2つの <Tx> の間に直接書かれている内容は翻訳されます。翻訳されていない内容を翻訳したい場合は、別の <Tx> を追加することができますが、<Tx> コンポーネントのネストは推奨されません。

注意事項

<Tx>コンポーネントは、アプリケーション内のコンテンツを実行時に翻訳するために設計されています。
<Tx>コンポーネントを使用して、プレーンテキストや変数、複数形対応を含むJSX構造を翻訳できます。

次のステップ

ビルド時の翻訳については、<T> コンポーネントを参照してください。
より高度な機能については、<T> リファレンスをご覧ください。
文字列の翻訳には、tx()、getGT()、useGT() をご参照ください。
より高度な翻訳パターンについては、変数コンポーネントの使用や分岐コンポーネントの使用をご覧ください。

<Tx>

このページについて