<GTProvider>

概述

<GTProvider> 组件为其子组件提供通用翻译（GT）上下文，使它们能够访问已翻译的内容。在你的应用中进行任何客户端翻译时，这是必需的。

适用场景

使用 <GTProvider> 包裹整个应用，以在客户端启用翻译功能。
当使用字典时，可以选择指定 id，以限制发送到客户端的字典数据，从而优化大型字典的性能。
<GTProvider> 组件同时用于内联 <T> 和字典。

参考

属性

Prop	Type	Default
`metadata??`	`object`	-
`devApiKey??`	`string`	-
`_versionId??`	`string`	-
`renderSettings??`	`RenderSettings`	`defaultRenderSettings`
`runtimeUrl??`	`string`	`'https://runtime.gtx.dev'`
`cacheUrl??`	`string`	`'https://cdn.gtx.dev'`
`locale??`	`string`	-
`defaultLocale??`	`string`	`libraryDefaultLocale`
`locales??`	`string[]`	-
`dictionary??`	`Dictionary`	`defaultDictionary`
`id??`	`string`	`undefined`
`projectId?`	`string`	-
`children?`	`ReactNode`	-

描述

属性	描述
`children`	任何需要在客户端翻译或访问翻译信息的组件或其父组件。这些应包括使用`<T>`、`useGT`或其他翻译工具的任何组件。
`projectId?`	General Translation云服务所需的项目ID。
`id?`	嵌套字典的ID，用于限制发送到客户端的数据。这对于具有大量字典的大型项目很有用。
`dictionary?`	项目的翻译字典。
`locales?`	项目批准的语言环境列表。
`defaultLocale?`	如果未找到其他语言环境，则使用的默认语言环境。
`locale?`	当前语言环境，如果已设置。
`cacheUrl?`	用于获取翻译的缓存服务的URL。
`runtimeUrl?`	用于获取翻译的运行时服务的URL。
`renderSettings?`	渲染翻译的设置。
`_versionId?`	用于获取翻译的版本ID。
`devApiKey?`	开发环境的API密钥。
`metadata?`	传递给上下文的附加元数据。

返回值

包含传递给此组件的子元素的React.JSX.Element|undefined。

示例

基本用法

将您的应用程序包装在 <GTProvider> 中以为您的应用添加翻译功能。不要忘记添加支持的语言环境列表来启用翻译。

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { GTProvider } from "gt-react";

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

字典

您也可以将字典传递给 <GTProvider> 组件，然后使用 useTranslations() 钩子访问它。

index.js

import dictionary from "./dictionary.js";

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

有关使用字典的更多信息，请查看此指南。

添加配置

如果您不喜欢直接向 <GTProvider> 组件传递属性，您可以创建一个配置文件并将其传递给组件。它还直接与 gtx-cli translate 命令集成，因此您不必手动指定诸如语言环境之类的参数。

gt.config.json

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // allows for rolling back to previous translations (autogenerated by the CLI)
}

您只需要将此配置传递给 <GTProvider> 组件即可。

index.js

import config from "../gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

自定义翻译加载器

您可以使用 loadTranslations 属性从自定义源加载翻译。当您需要从不同的源（如自定义 API）加载翻译时，这很有用。

index.js

import loadTranslations from "./loadTranslations";

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

渲染设置

渲染设置控制翻译的加载行为。有两个字段：timeout 和 method。

timeout 是等待翻译加载的毫秒数，超时后显示回退内容（默认：8000ms）。
method 是用于加载翻译的方法（"skeleton"、"replace" 或 "default"）。

index.js

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

每个渲染设置决定不同的加载行为： "skeleton" 将返回 null 直到翻译加载完成。 "replace" 将返回回退内容直到翻译加载完成。 "default" 将返回 null 直到翻译加载完成，除非回退语言环境与当前语言环境具有相同的语言（即 en-US 和 en-GB）。在这种情况下，它将立即返回回退内容直到翻译加载完成。

注意事项

<GTProvider> 必须包裹所有 <T> 组件以及其他与翻译相关的函数。了解更多信息请点击这里。

下一步

了解更多关于用于翻译文本和组件的 <T> 组件。
查看翻译组件和函数：<T>、useGT() 或 useTranslations()。

<GTProvider>

在本页面