文档：高级用法 – TacoTranslate

高级用法

Chinese (Simplified)

处理从右到左的语言

TacoTranslate 让您可以轻松支持在 React 应用程序中使用的从右到左（RTL）语言，例如阿拉伯语和希伯来语。正确处理 RTL 语言可确保内容为从右至左阅读的用户正确显示。

import {useTacoTranslate} from 'tacotranslate/react';

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

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

您还可以使用提供的 isRightToLeftLocaleCode 函数来检查 React 之外的当前语言。

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

禁用翻译

要禁用字符串中特定部分的翻译或确保某些片段保持原样，您可以使用三重方括号。此功能对于保持名称、技术术语或任何其他不应被翻译的内容的原始格式非常有用。

import {Translate} from 'tacotranslate/react';

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

在此示例中，单词“TacoTranslate”在翻译中将保持不变。

多个 TacoTranslate 提供者

我们强烈建议在您的应用中使用多个 TacoTranslate 提供者。这对于将您的翻译和字符串组织到不同的来源中非常有用，例如您的头部、页脚或特定部分。

您可以在这里阅读有关使用起源的更多信息。

TacoTranslate 提供程序会继承任何父提供程序的设置，因此您无需重复其他设置。

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

覆盖源或区域设置

除了使用多个 TacoTranslate 提供者之外，您还可以在 Translate 组件和 useTranslation 钩子级别上覆盖 origin 和 locale。

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

处理加载

当在客户端切换语言时，根据用户的网络连接情况，获取翻译可能需要几秒钟。您可以显示一个加载指示器，通过在切换过程中提供视觉反馈来提升用户体验。

import {useTacoTranslate} from 'tacotranslate/react';

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

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

复数形式

为了正确处理复数形式并根据不同语言正确显示基于数量的标签，以下做法被认为是最佳实践：

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

多种语言

为了在同一个应用程序中同时支持多种语言，您可以使用多个 TacoTranslate 提供者，并设置不同的 locale 值，如下所示：

您还可以在组件或钩子级别覆盖 locale。

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

使用翻译 ID

您可以向 Translate 组件添加 id，以处理相同字符串的不同翻译或含义。当相同文本根据上下文需要不同翻译时，这尤其有用。通过分配唯一的 ID，您可以确保字符串的每个实例都根据其特定含义被准确翻译。

import {Translate} from 'tacotranslate/react';

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

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

例如，页眉登录可能会翻译为“Iniciar sesión”，页脚登录可能会翻译为“Acceder”在西班牙语中。

最佳实践