没有翻译密钥的 React i18n

大多数 React i18n 库都使用翻译密钥。你可以用密钥替换应用程序中的所有文本，保留每种语言的翻译文件，并在运行时查找正确的文本。Magic Translate 跳过了所有这些：你用自己的语言写文本，当页面显示时它会被翻译。

带翻译键的 i18n 是如何工作的

使用基于密钥的库，一个简单的按钮如下所示：

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

每一个新文本都意味着一个新密钥、每个语言文件中的一个条目以及每种语言的翻译。当你更改英文文本时，其他语言会过时，直到有人再次翻译它们。

没有钥匙的同一个按钮

使用 Magic Translate 时，文本将保持原样：

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

没有语言文件需要维护。当您更改文本时，新版本将在下次显示时进行翻译，此后翻译将缓存。

入门

1. 注册 Magic Translate 并获取您的 API 密钥。免费计划包括每月5,000个字符。
2. 安装客户端并将你的应用程序包装在 MagicTranslateProvider 中，如 React 指南所示。
3. 用 <T> 换行你的文本。对于 props 和属性，使用 useT hook。

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

如果你在服务器上渲染，可以改用 React SSR，这样搜索引擎和用户就能得到完全翻译的 HTML。

当翻译键仍然是更好的选择时

机器翻译很好，但没有经过任何人的审查。如果应用程序的每个字都必须经过翻译人员的批准，例如法律或医学文本，则具有人工翻译功能的基于密钥的库将为您提供这种控制权。许多应用程序将两者结合在一起：Magic Translate 用于界面，并在重要的地方查看文本。

经常问的问题

翻译速度够快吗？

文本的第一次翻译可能需要几秒钟。之后，它会被缓存，需要 100 到 300 毫秒。使用 React SSR，翻译发生在服务器上，因此用户无需等待。

它的成本是多少？

每月使用量以翻译的字符计算，已经翻译的文本不再计算在内。查看使用量是如何计算和定价的。

支持哪些语言？

超过 70。查看支持的语言的完整列表。