المكون <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 كيلوبايت، أي حوالي 5000 حرف.

{/* 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>