Config
loadTranslations
loadTranslations() 函数的 API 参考
概览
loadTranslations 函数是自定义翻译加载行为的主要方式。
在生产环境中，需要存储你的翻译以便在应用中渲染。
默认情况下，你的翻译会存储在 GT 的 CDN（内容分发网络）中。
你可以指定 loadTranslations 函数从其他来源获取翻译，例如：
- 来自应用的 bundle（最常见）
- 来自数据库
- 来自 API
- 来自其他 CDN（内容分发网络）
我们已内置支持：可从应用 bundle 中的本地文件加载翻译。 请按照本指南在 React 应用中设置本地翻译（local translations）。
参考资料
参数
Prop
Type
描述
| 类型 | 描述 |
|---|---|
locale | 需要加载其翻译的 locale。 |
返回值
一个 Promise<any>，其解析结果为字符串，或是包含指定 locale 对应翻译内容的 JSX 对象。
设置
必须导入 loadTranslations 函数，并将其作为 prop 传递给 <GTProvider> 组件。
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目录。
export default async function loadTranslations(locale) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
};从你自己的 CDN（内容分发网络）加载翻译
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允许你在生产环境中自定义应用的翻译加载方式。- 最常见的用例是添加 local translations
下一步
本指南如何?