# General Translation React SDKs (gt-react, gt-next): loadTranslations
URL: https://generaltranslation.com/zh/docs/react/reference/functions/load-translations.mdx
---

title: loadTranslations
description: 使用 General Translation gt-react 自定义生产环境中的翻译加载方式。loadTranslations 的 API 参考。

---

`loadTranslations` 是一个由你定义的加载器函数，用于自定义 `gt-react` 在生产环境中从何处读取翻译。在[初始化调用](/docs/react/reference/config#initialization)中传入它，即可从默认的 General Translation CDN 之外的来源加载翻译。

*适用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`，但接入方式有所不同。`loadTranslations` 是你定义的加载器，不是导出的符号。在 `gt-react` 和 `gt-tanstack-start` 中，请将它传给初始化调用 (如下所示) 。`gt-next` 通过 `withGTConfig` 插件处理它 (文档见 Next.js 部分) ，而 `gt-react-native` 则通过其 provider 设置加载翻译。本页中的加载器约定在各处都相同。*

## 概览 [#overview]

定义一个函数，使其接收区域设置并返回对应的翻译内容，然后将该函数作为 `loadTranslations` 选项传给 [`initializeGT`](/docs/react/reference/config#initialize)。单页应用则改为将其传给 [`initializeGTSPA`](/docs/react/reference/config#initialize-spa)。

```tsx
const loadTranslations = (locale: string) =>
  import(`./_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });
```

*注意：在 `gt-react` 中，`loadTranslations` 是初始化调用中的一个配置选项，而不是 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 的 prop。默认情况下，翻译内容会从 General Translation CDN 加载。*

## 工作原理 [#how-it-works]

在生产环境中，翻译必须存储在运行时可读取的位置。默认情况下，它们来自 General Translation CDN。你可以提供 `loadTranslations`，从其他来源加载翻译，例如：

* 应用的 bundle (最常见) 。
* 数据库。
* API。
* 其他 CDN。

`gt-react` 内置了对从 bundle 中的本地文件加载翻译的支持。参见 [在本地存储翻译](/docs/react/guides/storing-translations)。

## 参数 [#parameters]

| 参数                  | 描述            | 类型       | 可选 | 默认值 |
| ------------------- | ------------- | -------- | -- | --- |
| [`locale`](#locale) | 要为其加载翻译的区域设置。 | `string` | 否  | —   |

### `locale` [#locale]

**类型** `string` · **必填**

要加载翻译的区域设置。

## Returns [#returns]

**Type** `Promise<unknown>`

一个 Promise，会解析为指定区域设置对应的翻译内容。

## 示例 [#examples]

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

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

## 备注 [#notes]

* `loadTranslations` 可自定义在生产环境中加载翻译的方式；最常见的用法是用于[本地翻译](/docs/react/guides/storing-translations)。
* 如果你想将自己编写的人工翻译作为独立的 i18n 库引入，请改用 [`loadDictionary`](/docs/react/reference/functions/load-dictionary)。