TacoTranslate
/
文档定价
 
  1. 介绍
  2. 入门指南
  3. 设置与配置
  4. 使用 TacoTranslate
  5. 服务器端渲染
  6. 高级用法
  7. 最佳实践
  8. 错误处理与调试
  9. 支持的语言

高级用法

处理从右到左的语言

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”。

最佳实践

来自Nattskiftet的产品挪威制造