loadTranslations()

概述

loadTranslations() 函数是自定义翻译加载行为的主要方式。

在生产环境中，您的翻译需要被存储，以便可以在您的应用中渲染。默认情况下，您的翻译将存储在 GT CDN 中。您可以指定一个 loadTranslations() 函数以从不同的来源获取翻译，例如：

从您的应用程序包中（最常见）
从数据库中
从 API 中
从不同的 CDN 中

我们已集成支持从应用程序包中的本地文件加载翻译。请遵循本指南在您的 React 应用中设置本地翻译。

参考

参数

Prop	Type	Default
`locale?`	`string`	-

描述

类型	描述
`locale`	应加载翻译的语言环境。

返回值

一个 Promise<any>，解析为包含给定语言环境翻译的字符串或 JSX 对象。

设置

您必须导入 loadTranslations() 函数，并将其作为一个 prop 分配给 <GTProvider> 组件。

src/index.js

import loadTranslations from './loadTranslations';
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

示例

从本地文件加载翻译

当配置为使用本地翻译时，gtx-cli translate命令会将翻译保存到./src/_gt目录。

loadTranslations.js

export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};

从您自己的 CDN 加载翻译

loadTranslations.js

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

注意事项

loadTranslations() 让您能够自定义在生产环境中应用程序中加载翻译的方式。
最常见的用例是添加本地翻译

下一步

了解为什么您可能想要使用本地翻译

loadTranslations()

在本页面