Thành phần <T>

Bọc nội dung của bạn trong thành phần <T> để dịch nó.

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

Props

Biến

Quấn các giá trị thay đổi, chẳng hạn như tên hoặc số đếm, trong v():

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

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

Magic Translate dịch văn bản xung quanh các giá trị một lần, là Hello {0}, you have {1} unread messages và đưa các giá trị trở lại ứng dụng của bạn. Bản dịch được lưu trong bộ nhớ cache và hoạt động cho mọi tên và mọi đếm, và bản thân các giá trị không bao giờ được gửi đến Magic Translate.

Các giá trị được đánh số theo thứ tự chúng xuất hiện. Bản dịch có thể di chuyển chúng bất cứ nơi nào ngôn ngữ cần chúng, ví dụ {1} ungelesene Nachrichten für {0}.

v() cũng có thể chứa một thành phần React, chẳng hạn như một liên kết:

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

Văn bản liên kết không được dịch sau đó. Để dịch nó cũng vậy, hãy đặt nó vào <T> của riêng nó: v(<Link href="/terms"><T>terms</T></Link>).

Nếu không có v(), một giá trị được dịch cùng với văn bản xung quanh nó. Điều đó hiệu quả, nhưng mỗi giá trị khác nhau là một bản dịch riêng biệt được tính vào việc sử dụng của bạn.

Hạn chế

1. Bạn không thể đặt các thành phần React bên trong thành phần <T>, ngoại trừ bên trong v(). Các phần tử HTML thuần túy đều ổn (xem ví dụ bên dưới).
2. Nội dung bên trong thành phần <T> không được vượt quá 10 KB, tức là khoảng 5.000 ký tự.

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