<GTProvider>

概述

<GTProvider> 组件为其子组件提供通用翻译 (GT) 上下文，使它们能够访问翻译后的内容。在您的应用程序中进行客户端翻译时，这是必需的。

何时使用

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

参考

属性

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

描述

属性	描述
`children`	任何需要在客户端翻译或访问翻译信息的组件或其父组件。这些应包括使用 `<T>`、`useGT` 或其他翻译工具的任何组件。
`projectId?`	通用翻译云服务所需的项目 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']}> // 启用西班牙语和法语 // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

字典

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

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" // 允许回滚到以前的翻译（由 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>
);

注意事项

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

下一步

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

<GTProvider>

概述

何时使用

参考

属性

描述

返回

示例

基本用法

字典

添加配置

自定义翻译加载器

注意事项

下一步

在本页面