T
<T> 组件 API 参考
概述
<T> 组件是 gt-react 中进行翻译的主要方式。
<T id="example"> // [!code highlight]
今天我去了
{" 商店"}
<p>
<b>买</b>了一些<i>食品杂货</i>。
</p>
</T> <T> 组件既可翻译纯文本，也支持复杂的 JSX 结构。
此外，它还提供处理变量、复数和特定语境翻译的功能。
构建时翻译：
<T> 的翻译在构建阶段完成。
这意味着翻译会在部署之前进行，从而降低延迟。
请务必遵循部署指南。
参考
属性
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 需要翻译的内容。可以包含纯文本或 JSX 结构。 |
id | 翻译字符串的唯一标识符。确保在你的应用中保持一致的翻译。 |
context | 提供用于改进翻译的额外上下文，有助于消除含义模糊的表述。 |
返回
React.JSX.Element|undefined，包含根据所提供的配置渲染的翻译或 fallback 内容。
行为
生产环境
在 CD 过程中，任何位于 <T> 内的 children 都会在应用部署前完成翻译。
这可确保所有 locale 的快速加载，但只能翻译构建时已知的内容。
生成后，翻译内容会根据你的配置 (1) 存储在 CDN（内容分发网络）中，或 (2) 存储在应用的构建产物中。 随后，这些翻译内容会提供给你的用户。 如果未找到相应翻译，将回退到原始内容。
请务必遵循此处的部署指南。
开发
在开发阶段，<T> 函数会按需翻译内容。
这有助于快速搭建原型，预览应用在不同语言下的呈现效果。
请记得在环境中添加 Dev API key 以启用此功能。
加载期间，除非语言相近（如 en-US 与 en-GB），否则 <T> 会返回 undefined；不过可通过渲染设置自定义此行为。
如果发生 Error，<T> 会返回原始内容。
在开发环境中，按需翻译可能会有延迟。 在生产构建中不会出现此延迟，因为全部内容都会预先翻译完成。
示例
基本用法
<T> 组件可通过 id 和其 children 翻译简单字符串。
请记住，必须在 <GTProvider> 内使用 <T> 组件才能获取翻译。
import { T } from 'gt-react';
export default function Greeting() {
return (
<T id="greeting"> // [!code highlight]
你好,世界!
</T>
);
}使用变量
<T> 组件可以在翻译中加入变量以呈现动态内容。
import { T, Var } from 'gt-react';
export default function DynamicGreeting(user) {
return (
<T id="greeting">
你好，<Var>{user.name}</Var>！ // [!code highlight]
</T>
);
}关于复数
<T> 组件也支持通过 <Plural> 组件实现 pluralization。
import { T, Plural } from 'gt-react';
export default function ItemCount({ count }) {
return (
<T id="item_count">
<Plural n={count}
singular={<>您有一项。</>}
plural={<>您有多项。</>}
/> // [!code highlight]
</T>
);
}限制
<T> 组件不会翻译动态内容。
import { T } from 'gt-react';
export default function DynamicContent({greeting}) {
return (
<T>
{greeting} // 将会产生错误 // [!code highlight]
</T>
);
}<T> 函数会翻译其后代节点。
import { T } from 'gt-react';
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
const InvalidTranslation = ({ children }) => (<div><b>无翻译</b></div>);
export default function Example() {
return (
<T>
<div><b>这是有效的!</b></div> // 会被翻译 // [!code highlight]
<ValidTranslation> // 会被翻译 // [!code highlight]
你好,世界! // [!code highlight]
</ValidTranslation> // [!code highlight]
<InvalidTranslation /> // 不会被翻译
</T>
);
}注意： 一个实用的经验法则是，文件中两处 <T> 组件之间的任何内容都会被翻译（确指位于这两者之间的文本）。
你也可以再添加一个 <T> 来覆盖未被翻译的内容，但不建议嵌套使用 <T> 组件。
注意事项
<T>组件用于在你的应用中进行内容翻译。它是gt-react的主要本地化方式。- 使用
<T>组件翻译纯文本或 JSX 结构，并支持变量与复数形式。 - 请确保将
<T>组件置于<GTProvider>中，以访问翻译上下文。
后续步骤
- 进一步了解更高级功能，如按需翻译、变量、上下文与复数处理，请参阅
<T>Design Patterns 文档。 - 若要翻译字符串，请参见
useGT。
本指南如何?