Config
loadTranslations
loadTranslations() 函数的 API 参考
概览
loadTranslations 函数是自定义翻译加载行为的主要方式。
在生产环境中，需要将翻译妥善存储，便于在应用中渲染。
默认情况下，翻译会存储在 GT CDN（内容分发网络）上。
你可以提供一个 loadTranslations 函数，从其他来源获取翻译，例如：
- 来自应用的 bundle（最常见）
- 来自数据库
- 来自 API
- 来自其他 CDN
我们已内置对从应用 bundle 的本地文件加载翻译的支持。 请按照本指南在 React 应用中配置本地翻译。
参考资料
参数
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让你可以在生产环境中自定义应用的翻译加载方式。- 最常见的用例是添加本地翻译
后续步骤
这份指南怎么样？