ال useT hook

استخدم useT hook لترجمة السلاسل في props والسمات، مثل aria-label للزر.

import { useT } from '@magic-translate/react';

const MyComponent = () => {
  const t = useT();

  return (
    <button aria-label={t('Main menu')}>
      <HamburgerIcon />
    </button>
  );
};

يمكنك استخدام وظيفة t() في أي مكان داخل المكون الخاص بك. يمكنك أيضًا استخدامه في الترميز بدلاً من المكون <T> إذا كنت تفضل ذلك.

const MyComponent = () => {
  const t = useT();

  return <p>{t('This will be translated')}</p>;
};

المتغيرات

لوضع قيم مثل الاسم أو العد في سلسلة، اتصل بـ t كقالب ذي علامات، بدون أقواس:

const MyComponent = ({ count }: { count: number }) => {
  const t = useT();

  return <p>{t`You have ${count} unread messages`}</p>;
};

يترجم Magic Translate You have {0} unread messages مرة واحدة ويعيد القيمة إلى تطبيقك، لذلك تعمل ترجمة مخبأة واحدة لكل حساب. لا يتم إرسال القيم مطلقًا إلى Magic Translate. هذا هو نفس v() في مكون <T>.

خيارات

يمكنك تمرير نفس الخيارات إلى t() بالنسبة لمكون <T>، على سبيل المثال formality.

const MyComponent = () => {
  const t = useT();

  return <button>{t('Please click here', { formality: 'formal' })}</button>;
};

يتضمن ذلك id، لتحرير هذا الاستخدام للنص بمفرده:

<button aria-label={t('Save', { id: 'checkout-save' })} />

لا يأخذ القالب الذي تم وضع علامة عليه أي خيارات. بالنسبة للنص الذي يحتوي على كلا المتغيرين وid، استخدم المكون <T>.