useT hook

Sử dụng useT hook để dịch chuỗi trong props và thuộc tính, chẳng hạn như aria-label của nút.

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

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

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

Bạn có thể sử dụng hàm t() bất cứ nơi nào bên trong thành phần của bạn. Bạn cũng có thể sử dụng nó trong đánh dấu của mình thay vì thành phần <T> nếu bạn thích.

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

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

Biến

Để đặt các giá trị như tên hoặc đếm vào một chuỗi, hãy gọi t dưới dạng mẫu được gắn thẻ, không có dấu ngoặc đơn:

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

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

Magic Translate dịch You have {0} unread messages một lần và đưa giá trị trở lại ứng dụng của bạn, vì vậy một bản dịch được lưu trong bộ nhớ đệm hoạt động cho mỗi đếm. Các giá trị không bao giờ được gửi đến Magic Translate. Điều này giống như v() trong thành phần <T>.

Tùy chọn

Bạn có thể truyền các tùy chọn tương tự cho t() như cho thành phần <T>, ví dụ formality.

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

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

Điều đó bao gồm id, để tự chỉnh sửa cách sử dụng văn bản này:

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

Mẫu được gắn thẻ không có tùy chọn. Đối với văn bản có cả biến và id, hãy sử dụng thành phần <T>.