TacoTranslate
/
文档定价
 
5月04日

React 应用程序国际化(i18n)的最佳解决方案

您是否希望将您的 React 应用程序扩展到新的市场?TacoTranslate 让本地化您的 React 应用变得非常简单,帮助您轻松触达全球用户,无需繁琐操作。

为什么选择 TacoTranslate 用于 React?

  • 无缝集成:专为 React 应用设计,TacoTranslate 可轻松融入您现有的工作流程。
  • 自动字符串收集:无需再手动管理 JSON 文件。TacoTranslate 会自动从您的代码库中收集字符串。
  • AI 驱动的翻译:利用 AI 的强大能力,提供符合上下文且与您的应用语调相符的精准翻译。
  • 即时语言支持:只需点击一下,即可添加对新语言的支持,使您的应用具备全球访问能力。

运作方式

通过 npm 安装 TacoTranslate 软件包:

npm install tacotranslate

当您安装好模块后,您需要创建一个 TacoTranslate 账号、一个翻译项目以及相关的 API 密钥。在这里创建账号。 免费注册,且 无需添加信用卡。

在 TacoTranslate 应用程序的用户界面中,创建一个项目,并导航到其 API 密钥标签页。创建一个 read 密钥和一个 read/write 密钥。我们将它们保存为环境变量。read 密钥称为 public,而 read/write 密钥称为 secret。例如,您可以将它们添加到项目根目录下的 .env 文件中。

您还需要添加另外两个环境变量:TACOTRANSLATE_DEFAULT_LOCALETACOTRANSLATE_ORIGIN

  • TACOTRANSLATE_DEFAULT_LOCALE:默认的回退语言代码。在此示例中,我们将其设置为en表示英语。
  • TACOTRANSLATE_ORIGIN:存储您的字符串的“文件夹”,例如您的网站网址。在这里了解更多关于 origins 的信息。
.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

请务必绝不会将秘密的 read/write API 密钥泄露到客户端生产环境中。

设置 TacoTranslate

通过将您的应用程序包裹在 TacoTranslate 上下文提供者中,初始化您的 React 应用程序中的 TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

您现在可以在应用程序中的任何位置使用 Translate 组件来显示翻译后的文本!请务必查看 我们的文档,以获取更多信息以及针对您具体设置的实现指南。

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

使用 TacoTranslate 的优势

  • 节省时间:自动化繁琐的本地化和字符串收集过程,节省您宝贵的时间。
  • 成本效益高:减少人工翻译的需求,降低您的本地化成本。
  • 提高准确性:AI驱动的翻译确保上下文准确且高质量的结果。
  • 可扩展的解决方案:随着您的应用和客户群增长,轻松添加对新语言的支持。

今天就开始吧!

当您将任意字符串添加到 Translate 组件时,您的 React 应用将自动被翻译。请注意,只有拥有 read/write 权限的 API 密钥环境才能创建新的待翻译字符串。

我们建议您设置一个封闭且安全的预发布环境,在该环境中测试您的生产应用,并在上线前添加新的字符串。这将防止任何人窃取您的秘密 API 密钥,并避免通过添加恶意字符串导致翻译项目膨胀。

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!

Nattskiftet 产品挪威制造