# gt-react: General Translation React SDK: loadTranslations
URL: https://generaltranslation.com/zh/docs/react/api/config/load-translations.mdx
---
title: loadTranslations
description: loadTranslations() 函数的 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的 template。 */}


## 概述

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

在生产环境中，翻译内容需要存储起来，应用才能将其渲染出来。
默认情况下，翻译会存储在 GT CDN 上。
你可以指定 `loadTranslations` 函数，从其他来源获取翻译，例如：

* 从应用的 bundle 中加载 (最常见) 
* 从数据库加载
* 从 API 加载
* 从其他 CDN 加载

我们已内置对从应用 bundle 中的本地文件加载翻译的支持。
请按照[本指南](/docs/react/guides/local-tx)在你的 React 应用中设置本地翻译。

## 参考

### 参数

<TypeTable
  type={{
  "locale": {
      type: 'string',
      optional: false,
  },
}}
/>

### 说明

| 类型       | 说明            |
| -------- | ------------- |
| `locale` | 应为其加载翻译的区域设置。 |

### 返回值

一个 `Promise<any>`，其结果为字符串或 JSX 对象，包含给定区域设置的翻译内容。

***

## 设置

您必须导入 `loadTranslations` 函数，并将其作为 prop 传给 `<GTProvider>` 组件。

```jsx title="src/index.js"
import loadTranslations from './loadTranslations';

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

***


## 示例

### 从本地文件加载翻译

配置为使用[本地翻译](/docs/react/guides/local-tx)后，[`gt translate`](/docs/cli/translate) 命令会将翻译保存到 `./src/_gt` 目录。

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


### 从自有 CDN 加载翻译

```js title="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` 让你可以在生产环境中自定义应用加载翻译的方式。
* 它最常见的用途是添加[本地翻译](/docs/react/guides/local-tx)

## 后续步骤