Tài liệu: Sử dụng nâng cao

Sử dụng nâng cao

Vietnamese

Xử lý các ngôn ngữ từ phải sang trái

TacoTranslate giúp bạn dễ dàng hỗ trợ các ngôn ngữ viết từ phải sang trái (RTL), chẳng hạn như tiếng Ả Rập và tiếng Do Thái, trong các ứng dụng React của bạn. Việc xử lý đúng các ngôn ngữ RTL đảm bảo nội dung của bạn được hiển thị chính xác cho người dùng đọc từ phải sang trái.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Bạn cũng có thể sử dụng hàm isRightToLeftLocaleCode được cung cấp để kiểm tra ngôn ngữ hiện tại bên ngoài React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Vô hiệu hóa dịch thuật

Để vô hiệu hóa dịch cho các phần cụ thể của một chuỗi hoặc để đảm bảo một số đoạn được giữ nguyên như ban đầu, bạn có thể sử dụng dấu ngoặc vuông ba lần. Tính năng này hữu ích để duy trì định dạng gốc của tên, thuật ngữ kỹ thuật hoặc bất kỳ nội dung nào khác không nên dịch.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Trong ví dụ này, từ “TacoTranslate” sẽ không bị thay đổi trong bản dịch.

Nhiều nhà cung cấp TacoTranslate

Chúng tôi rất khuyến khích sử dụng nhiều nhà cung cấp TacoTranslate trong ứng dụng của bạn. Điều này hữu ích để tổ chức các bản dịch và chuỗi của bạn thành các nguồn khác nhau, chẳng hạn như phần đầu, phần chân trang hoặc các phần cụ thể.

Bạn có thể đọc thêm về cách sử dụng nguồn gốc tại đây.

Các nhà cung cấp TacoTranslate kế thừa các cài đặt từ bất kỳ nhà cung cấp cha nào, vì vậy bạn sẽ không phải lặp lại bất kỳ cài đặt nào khác.

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>
	);
}

Ghi đè nguồn gốc hoặc ngôn ngữ vùng

Ngoài việc sử dụng nhiều nhà cung cấp TacoTranslate, bạn cũng có thể ghi đè cả nguồn gốc và địa phương trên cấp độ thành phần Translate và 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" />
		</>
	);
}

Xử lý trạng thái tải

Khi thay đổi ngôn ngữ ở phía client, việc lấy bản dịch có thể mất một vài khoảnh khắc tùy thuộc vào kết nối của người dùng. Bạn có thể hiển thị một biểu tượng đang tải để cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan trong quá trình chuyển đổi.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Số nhiều hóa

Để xử lý số lượng nhiều và hiển thị nhãn dựa trên số lượng một cách chính xác trong các ngôn ngữ khác nhau, đây được coi là thực hành tốt nhất:

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)}}
		/>
	);
}

Nhiều ngôn ngữ

Để hỗ trợ nhiều ngôn ngữ cùng lúc trong cùng một ứng dụng, bạn có thể sử dụng nhiều nhà cung cấp TacoTranslate với các giá trị locale khác nhau như được trình bày bên dưới:

Bạn cũng có thể ghi đè locale ở cấp độ thành phần hoặc 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>
	);
}

Sử dụng ID bản dịch

Bạn có thể thêm một id vào thành phần Translate để xử lý các bản dịch hoặc ý nghĩa khác nhau cho cùng một chuỗi. Điều này đặc biệt hữu ích khi cùng một văn bản cần có các bản dịch khác nhau dựa trên ngữ cảnh. Bằng cách gán các ID duy nhất, bạn đảm bảo rằng mỗi trường hợp của chuỗi được dịch chính xác theo ý nghĩa cụ thể của nó.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Ví dụ, đăng nhập ở phần đầu trang có thể được dịch thành “Iniciar sesión”, và đăng nhập ở phần chân trang có thể được dịch thành “Acceder” trong tiếng Tây Ban Nha.

Các thực hành tốt nhất