<T> コンポーネント

翻訳するには、コンテンツを <T> コンポーネントで囲んで。

<T>This content will be translated</T>

Props

変数

名前やカウントなど、変化する値を v() で囲む:

import { T, v } from '@magic-translate/react';

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate は、値の周りのテキストを Hello {0}, you have {1} unread messages として一度翻訳し、値をアプリに戻す。翻訳はキャッシュされ、すべての名前とすべてのカウントで機能し、値自体が Magic Translate に送信されることはない。

値には表示される順に番号が付けられている。翻訳は、{1} ungelesene Nachrichten für {0} のように、言語で必要な場所に移動できる。

v() にはリンクなどの React コンポーネントを入れることもできる:

<T>
  Read our {v(<Link href="/terms">terms</Link>)} before you continue.
</T>

その場合、リンクテキストは翻訳されていない。それも翻訳するには、それ自体の <T>: v(<Link href="/terms"><T>terms</T></Link>) に入れてください。

v() がないと、値はその前後のテキストと一緒に翻訳される。それはうまくいくが、値が異なるたびに個別の翻訳が行われ、使用量にカウントされる。

制限事項

1. React コンポーネントを <T> コンポーネントの内側に置くことはできない。v() の内側以外は。プレーンなHTML要素でも問題ない（下の例を参照）。
2. <T> コンポーネント内のコンテンツは、10 KB、つまり約5,000文字を超えてはいけない。

{/* this is OK, since <a> is a plain HTML element */}
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

{/* this does NOT work, since <MyButton> is a React component */}
<T>
  <MyButton>Click me</MyButton>
</T>