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，其中包含已渲染的翻译或备用内容。
行为
生产环境
在持续交付（CD）流程中，任何位于 <T> 内部的 children 都会在应用部署前完成翻译。
这可确保所有 locale 都能快速加载，但它只能翻译构建时已知的内容。
生成后，翻译会根据你的配置（1）存储在 CDN（内容分发网络）中，或（2）存储在应用的构建产物中。 之后，已翻译的内容会提供给你的用户。 如果未找到翻译，将回退（fallback）到原始内容。
请参阅此处的部署指南：deployment guide here。
开发
在开发阶段，<T> 函数会按需翻译内容。
这有助于快速搭建原型并预览应用在不同语言下的呈现效果。
请记得在环境中添加 Dev API key 以启用该功能。
在加载过程中，除非语言相近（如 en-US 与 en-GB），<T> 将返回 undefined；你也可以通过渲染设置自定义此行为。
如果发生错误，<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> 组件进行复数化处理。
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> // will be translated // [!code highlight]
<ValidTranslation> // will be translated // [!code highlight]
你好，世界！ // [!code highlight]
</ValidTranslation> // [!code highlight]
<InvalidTranslation /> // will not be translated
</T>
);
}注意： 一个实用的经验法则是：文件中两个 <T> 标签之间的任何内容（即实际夹在两者之间的内容）都会被翻译。
你也可以再添加一个 <T> 来翻译尚未被翻译的内容，但不建议嵌套使用 <T> 组件。
注意事项
<T>组件用于翻译应用中的内容。它是gt-react中实现本地化的主要方式。- 使用
<T>组件翻译纯文本或 JSX 结构，包括 variables 和 pluralization。 - 确保将
<T>组件包裹在<GTProvider>中，以获取翻译上下文。
下一步
这份指南怎么样？