Components
GTProvider
<GTProvider> 组件 API 参考
概览
<GTProvider> 组件会向其 children 提供 General Translation（GT）上下文，使其能够访问已翻译的内容。
在你的应用中进行任何客户端翻译时，都必须使用它。
何时使用
- 将整个应用包裹在
<GTProvider>中，以在客户端启用翻译。 - 使用字典时，可选地指定一个
id，以限制发送到客户端的字典数据，从而在字典较大时优化性能。 <GTProvider>组件同时用于内联<T>和dictionaries。
参考资料
属性
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 需要在客户端进行翻译或访问翻译信息的任意组件，或此类组件的父级。应包含所有使用 <T>、useGT 或其他翻译工具的组件。 |
id? | 嵌套字典的 ID，用于限定发送到客户端的数据范围。对含有大量 dictionaries 的大型项目尤其有用。 |
返回值
包含传递给该组件的 children 的 JSX.Element | undefined。
示例
基本用法
将应用包裹在 <GTProvider> 中，为其提供翻译上下文。
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="zh">
<body>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}使用 id 属性限定子集
通过指定 id 属性，仅向客户端发送字典的某个子集，以优化性能。
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>组件。
这份指南怎么样？