<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>の翻訳は実行時に行われます。これは翻訳がリアルタイムで実行されることを意味します。

リファレンス

Props

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

説明

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

振る舞い

<Tx>は、実行時にjsxを翻訳します。これは、翻訳がライブで行われることを意味し、実行時にのみ知られるコンテンツを翻訳することができます。その代償として、オンデマンド翻訳の読み込みを待つ間に遅延が発生し、かなり遅くなります。

読み込み中、<Tx>は言語が類似している場合（en-USとen-GBなど）を除き、未定義を返しますが、この動作はレンダー設定でカスタマイズできます。エラーが発生した場合、<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> // 翻訳されます
 
            <ValidTranslation> // 翻訳されます
                Hello, world!
            </ValidTranslation>
 
            <InvalidTranslation /> // 翻訳されません
        </Tx>
    );
}

注意: 基本的なルールとして、ファイル内の2つの <Tx> の間に文字通り存在するコンテンツは翻訳されます。翻訳されていないコンテンツを翻訳するために、別の <Tx> を追加することもできますが、<Tx> コンポーネントのネストはお勧めしません。

メモ

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

次のステップ

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

<Tx>

このページについて