loadTranslations()

概述

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

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

从你的应用包中（最常见）
从数据库中
从 API 获取
从其他 CDN 获取

我们已经集成了从应用包中的本地文件加载翻译的支持。请按照本指南在你的 React 应用中设置本地翻译。

参考

参数

Prop	Type	Default
`locale?`	`string`	-

描述

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

返回值

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

设置

你必须导入 loadTranslations() 函数，并将其作为属性传递给 <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()

在本页面