Penggunaan lanjutan
Mengendalikan bahasa yang ditulis dari kanan ke kiri
TacoTranslate memudahkan untuk menyokong bahasa bertulis kanan-ke-kiri (RTL), seperti Bahasa Arab dan Ibrani, dalam aplikasi React anda. Pengendalian yang betul terhadap bahasa RTL memastikan kandungan anda dipaparkan dengan betul untuk pengguna yang membaca dari kanan ke kiri.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Anda juga boleh menggunakan fungsi yang disediakan isRightToLeftLocaleCode
untuk memeriksa bahasa semasa di luar React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Nyahaktifkan terjemahan
Untuk mematikan terjemahan bagi bahagian tertentu dalam rentetan atau untuk memastikan segmen tertentu dikekalkan sebagaimana adanya, anda boleh menggunakan tiga tanda kurungan siku. Ciri ini berguna untuk mengekalkan format asal nama, istilah teknikal, atau mana-mana kandungan lain yang tidak sepatutnya diterjemahkan.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Dalam contoh ini, perkataan “TacoTranslate” akan tetap tidak berubah dalam terjemahan.
Beberapa penyedia TacoTranslate
Kami sangat menggalakkan penggunaan pelbagai penyedia TacoTranslate
dalam aplikasi anda. Ini berguna untuk menyusun terjemahan dan rentetan anda ke dalam sumber yang berbeza, seperti tajuk, pengaki, atau bahagian tertentu.
Anda boleh baca lebih lanjut tentang penggunaan origins di sini.
Pembekal TacoTranslate
mewarisi tetapan daripada mana-mana pembekal induk, jadi anda tidak perlu mengulangi sebarang tetapan lain.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Header() {
return (
<TacoTranslate origin="header">
// ...
</TacoTranslate>
);
}
function Menu() {
return (
<TacoTranslate origin="menu">
// ...
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Header />
<Menu />
</TacoTranslate>
);
}
Menulis ganti asal atau setempat
Selain menggunakan pelbagai penyedia TacoTranslate
, anda juga boleh menimpa kedua-dua origin dan locale pada komponen Translate
dan peringkat hook useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Mengendalikan pemuatan
Apabila menukar bahasa di sisi klien, pemuatan terjemahan mungkin mengambil beberapa saat bergantung pada sambungan pengguna. Anda boleh memaparkan penunjuk pemuatan untuk meningkatkan pengalaman pengguna dengan memberikan maklum balas visual semasa pertukaran bahasa.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralisasi
Untuk menangani pluralisasi dan memaparkan label berasaskan kiraan dengan betul dalam pelbagai bahasa, ini dianggap sebagai amalan terbaik:
import {Translate, useLocale} from 'tacotranslate/react';
function PhotoCount() {
const locale = useLocale();
const count = 1;
return count === 0 ? (
<Translate string="You have no photos." />
) : count === 1 ? (
<Translate string="You have 1 photo." />
) : (
<Translate
string="You have {{count}} photos."
variables={{count: count.toLocaleString(locale)}}
/>
);
}
Pelbagai bahasa
Untuk menyokong pelbagai bahasa serentak dalam aplikasi yang sama, anda boleh menggunakan berbilang penyedia TacoTranslate dengan nilai locale
yang berbeza seperti yang ditunjukkan di bawah:
Anda juga boleh menimpa locale
pada peringkat komponen atau hook.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Spanish() {
return (
<TacoTranslate locale="es">
<Translate string="Hello, world in Spanish!" />
</TacoTranslate>
);
}
function Norwegian() {
return (
<TacoTranslate locale="no">
<Translate string="Hello, world in Norwegian!" />
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Spanish />
<Norwegian />
</TacoTranslate>
);
}
Menggunakan ID terjemahan
Anda boleh menambah id
kepada komponen Translate
untuk mengendalikan terjemahan atau maksud yang berbeza bagi teks yang sama. Ini amat berguna apabila teks yang sama memerlukan terjemahan yang berbeza mengikut konteks. Dengan memberikan ID unik, anda memastikan setiap contoh teks itu diterjemahkan dengan tepat mengikut maksudnya.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Sebagai contoh, log masuk di bahagian header mungkin diterjemahkan kepada “Iniciar sesión”, dan log masuk di bahagian footer mungkin diterjemahkan kepada “Acceder” dalam bahasa Sepanyol.