Tx
<Tx> コンポーネントの APIリファレンス
概要
<Tx> コンポーネントは、実行時に JSX コンテンツを翻訳します。
<Tx>
今日、
{"お店に"}
<p>
<i>食料品</i>を<b>買い</b>に行きました。
</p>
</Tx> <Tx> コンポーネントは、プレーンテキストに加えて複雑な JSX 構造の翻訳にも対応しています。
また、variables、複数形、コンテキストに応じた翻訳を扱うための機能も提供します。
<Tx> はサーバーサイド専用です。
実行時翻訳:
<Tx> の翻訳は実行時に行われます。
つまり、翻訳はリアルタイムで実行されます。
リファレンス
Props
Prop
Type
説明
| Prop | 説明 |
|---|---|
children | 翻訳対象のコンテンツ。プレーンテキストや JSX 構造を含められます。 |
context | 翻訳をより適切にするための追加コンテキスト。あいまいな表現の解消に役立ちます。 |
locale | 翻訳に使用する任意の locale。アプリでサポートされている場合、既定ではブラウザーで最も優先される locale が使用されます。 |
動作
<Tx> は実行時に JSX を翻訳します。
つまり、翻訳はリアルタイムに行われるため、実行時になって初めて判明するコンテンツでも翻訳できます。
その代償として、オンデマンド翻訳の読み込み待機による遅延が発生し、読み込み速度は大幅に低下します。
読み込み中は、言語が類似している場合（en-US と en-GB など）を除き、<Tx> は undefined を返します。この挙動はレンダー設定でカスタマイズ可能です。
エラーが発生した場合、<Tx> は元のコンテンツを返します。
推奨としては、<T>、getGT、または useGT を使って、可能な限りビルド時に翻訳を済ませ、
必要な場合にのみ、<Tx> や tx のようなオンデマンド翻訳を使用してください。
こちらのデプロイガイドに必ず従ってください。
例
基本的な使い方
<Tx> コンポーネントは、実行時に子要素を翻訳します。
import { Tx } from 'gt-next';
export default function Greeting() {
return (
<Tx id="greeting">
こんにちは、世界！
</Tx>
);
}variables を使う
<Var> コンポーネントを使って children を variables としてマークできます。
これにより、翻訳対象外にすべきコンテンツを指定できます。
import { Tx, Var } from 'gt-next';
export default function DynamicGreeting(user) {
return (
<Tx>
こんにちは、<Var>{user.name}</Var>
</Tx>
);
}複数形に対応
<T> コンポーネントは、<Plural> コンポーネントを使って複数形ルールにも対応します。
import { Tx, Plural } from 'gt-next';
export default function ItemCount({ count }) {
return (
<Tx>
<Plural n={count}
singular={<>アイテムが1つあります。</>}
plural={<>アイテムが複数あります。</>}
/>
</Tx>
);
}制限事項
<Tx> 関数は、その子孫要素のみを翻訳します。
import { Tx } from 'gt-next';
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
const InvalidTranslation = ({ children }) => (<div><b>翻訳なし</b></div>);
export default function Example() {
return (
<Tx>
<div><b>これは有効です!</b></div> // 翻訳されます
<ValidTranslation> // 翻訳されます
こんにちは、世界!
</ValidTranslation>
<InvalidTranslation /> // 翻訳されません
</Tx>
);
}注: 目安として、ファイル内で2つの <Tx> の間に文字通り挟まれているコンテンツは翻訳されます。
まだ翻訳されていないコンテンツについては、別の <Tx> を追加して翻訳できますが、<Tx> コンポーネントのネストは推奨されません。
注意事項
<Tx>コンポーネントは、アプリケーション内のコンテンツを実行時に翻訳するために設計されています。<Tx>コンポーネントを使用すると、variables や 複数形ルール を含むプレーンテキストや JSX 構造を翻訳できます。
次のステップ
- Buildtime Translation については、
<T>コンポーネントを参照してください。 - さらに高度な機能については、
<T>リファレンス をご覧ください。 - 文字列の翻訳については、
tx、getGT、useGTを参照してください。
このガイドはいかがですか?