<GTProvider>

概述

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

何时使用

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

参考

Props

Prop	Type	Default
`id??`	`string`	`undefined`
`children?`	`ReactNode`	-

描述

Prop	描述
`children`	任何需要在客户端翻译或访问翻译信息的组件或其父组件。这些应该包括任何使用 `<T>`、`useGT` 或其他翻译工具的组件。
`id?`	嵌套字典的 ID，用于限制发送到客户端的数据。这对于拥有大量字典的大型项目很有用。

返回值

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

示例

基本用法

将您的应用程序包装在 <GTProvider> 中，为您的应用提供翻译上下文。

layout.js

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider> // [!code highlight]
                    {children}
                </GTProvider> // [!code highlight]
            </body>
        </html>
    );
}

使用 `id` 属性获取子集

指定 id 属性，通过仅向客户端发送字典的子集来优化性能。

layout.js

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider id="nested.dictionary.key"> // [!code highlight]
                    {children}
                </GTProvider>
            </body>
        </html>
    );
}

注意事项

<GTProvider> 必须包装客户端组件中的所有 <T> 组件和其他翻译相关组件。在这里了解更多信息。
对于服务器端翻译，不需要 <GTProvider>，但仍然可以使用。

后续步骤

了解更多关于<T> 组件的信息，用于翻译文本和组件。
查看 withGTConfig() 文档，获取高级自定义选项。

<GTProvider>

在本页面