GitHub

概览

<GTProvider> 组件为其 children 提供 General Translation（GT）上下文，使其能够访问已翻译的内容。在应用中进行任何客户端翻译时，都必须使用它。

何时使用

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

参考资料

属性

Prop

Type

描述

Prop	描述
`children`	需要在客户端进行翻译或访问翻译信息的任意组件，或其父组件。应包含使用 `<T>`、`useGT` 或其他翻译工具的组件。
`projectId?`	用于 General Translation 云服务的项目 ID。
`id?`	用于限定发送到客户端数据范围的嵌套字典的 ID。对拥有庞大 dictionaries 的大型项目很有帮助。
`dictionary?`	项目的翻译字典。
`locales?`	项目批准的 locale 列表。
`defaultLocale?`	在未找到其他 locale 时使用的默认 locale。
`locale?`	当前 locale（如已设置）。
`cacheUrl?`	用于获取翻译的缓存服务 URL。
`runtimeUrl?`	用于获取翻译的运行时服务 URL。
`renderSettings?`	翻译渲染设置。
`_versionId?`	用于获取翻译的版本 ID。
`devApiKey?`	开发环境的 API key。
`metadata?`	传递到上下文的附加元数据。

React.JSX.Element | undefined，其中包含传递给该组件的 children。

示例

基本用法

使用 <GTProvider> 包裹你的应用以启用翻译功能。别忘了添加支持的 locales 列表以启用翻译。

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> 组件，然后通过 useTranslations 钩子进行访问。

index.js

import dictionary from "./dictionary.js";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // 【高亮代码】
      <App />
    </GTProvider>
  </StrictMode>
);

关于使用 dictionaries 的更多信息，请参阅此指南。

添加配置

如果你不想直接向 <GTProvider> 组件传递 props，可以创建一个配置文件并将其传给该组件。它也可直接与 gtx-cli translate 命令集成，因此无需再把 locales 等内容作为参数手动指定。

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>
);

渲染设置

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

timeout 表示在显示后备内容之前等待翻译加载的时间（毫秒）（默认：8000ms）。
method 指定加载翻译所使用的方法（"skeleton"、"replace" 或 "default"）。

index.js

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

每种渲染设置对应不同的加载行为： "skeleton" 会在翻译加载完成前返回 null。 "replace" 会在翻译加载完成前返回回退内容。 "default" 会在翻译加载完成前返回 null，除非回退 locale 与当前 locale 的语言相同（例如 en-US 和 en-GB）。在这种情况下，它会在翻译加载完成前立即返回回退内容。

注意事项

<GTProvider> 必须包裹所有 <T> 组件以及其他与翻译相关的函数。了解更多，请见此处。

下一步

进一步了解用于翻译文本和组件的 <T> 组件。

概览

<GTProvider> 组件为其 children 提供 General Translation（GT）上下文，使其能够访问已翻译的内容。在应用中进行任何客户端翻译时，都必须使用它。

何时使用

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

Prop	描述
`children`	需要在客户端进行翻译或访问翻译信息的任意组件，或其父组件。应包含使用 `<T>`、`useGT` 或其他翻译工具的组件。
`projectId?`	用于 General Translation 云服务的项目 ID。
`id?`	用于限定发送到客户端数据范围的嵌套字典的 ID。对拥有庞大 dictionaries 的大型项目很有帮助。
`dictionary?`	项目的翻译字典。
`locales?`	项目批准的 locale 列表。
`defaultLocale?`	在未找到其他 locale 时使用的默认 locale。
`locale?`	当前 locale（如已设置）。
`cacheUrl?`	用于获取翻译的缓存服务 URL。
`runtimeUrl?`	用于获取翻译的运行时服务 URL。
`renderSettings?`	翻译渲染设置。
`_versionId?`	用于获取翻译的版本 ID。
`devApiKey?`	开发环境的 API key。
`metadata?`	传递到上下文的附加元数据。

React.JSX.Element | undefined，其中包含传递给该组件的 children。

示例

基本用法

使用 <GTProvider> 包裹你的应用以启用翻译功能。别忘了添加支持的 locales 列表以启用翻译。

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> 组件，然后通过 useTranslations 钩子进行访问。

index.js

import dictionary from "./dictionary.js";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // 【高亮代码】
      <App />
    </GTProvider>
  </StrictMode>
);

关于使用 dictionaries 的更多信息，请参阅此指南。

添加配置

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>
);

渲染设置

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

timeout 表示在显示后备内容之前等待翻译加载的时间（毫秒）（默认：8000ms）。
method 指定加载翻译所使用的方法（"skeleton"、"replace" 或 "default"）。

index.js

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

注意事项

<GTProvider> 必须包裹所有 <T> 组件以及其他与翻译相关的函数。了解更多，请见此处。

下一步

进一步了解用于翻译文本和组件的 <T> 组件。

概览

<GTProvider> 组件为其 children 提供 General Translation（GT）上下文，使其能够访问已翻译的内容。在应用中进行任何客户端翻译时，都必须使用它。

何时使用

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

Prop	描述
`children`	需要在客户端进行翻译或访问翻译信息的任意组件，或其父组件。应包含使用 `<T>`、`useGT` 或其他翻译工具的组件。
`projectId?`	用于 General Translation 云服务的项目 ID。
`id?`	用于限定发送到客户端数据范围的嵌套字典的 ID。对拥有庞大 dictionaries 的大型项目很有帮助。
`dictionary?`	项目的翻译字典。
`locales?`	项目批准的 locale 列表。
`defaultLocale?`	在未找到其他 locale 时使用的默认 locale。
`locale?`	当前 locale（如已设置）。
`cacheUrl?`	用于获取翻译的缓存服务 URL。
`runtimeUrl?`	用于获取翻译的运行时服务 URL。
`renderSettings?`	翻译渲染设置。
`_versionId?`	用于获取翻译的版本 ID。
`devApiKey?`	开发环境的 API key。
`metadata?`	传递到上下文的附加元数据。

React.JSX.Element | undefined，其中包含传递给该组件的 children。

示例

基本用法

使用 <GTProvider> 包裹你的应用以启用翻译功能。别忘了添加支持的 locales 列表以启用翻译。

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> 组件，然后通过 useTranslations 钩子进行访问。

index.js

import dictionary from "./dictionary.js";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // 【高亮代码】
      <App />
    </GTProvider>
  </StrictMode>
);

关于使用 dictionaries 的更多信息，请参阅此指南。

添加配置

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>
);

渲染设置

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

timeout 表示在显示后备内容之前等待翻译加载的时间（毫秒）（默认：8000ms）。
method 指定加载翻译所使用的方法（"skeleton"、"replace" 或 "default"）。

index.js

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

注意事项

<GTProvider> 必须包裹所有 <T> 组件以及其他与翻译相关的函数。了解更多，请见此处。

下一步

进一步了解用于翻译文本和组件的 <T> 组件。

GTProvider

本页内容

GTProvider

本页内容

GTProvider

本页内容

GitHub在 GitHub 上加星

GitHub在 GitHub 上加星

在 GitHub 上加星

在 GitHub 上加星