Components
Tx
<Tx> 组件的 API 参考
概览
<Tx> 组件可在运行时对 JSX 内容进行翻译。
<Tx>
今天，我去了
{" 商店"}
<p>
<b>买</b> 一些 <i>食品杂货</i>。
</p>
</Tx> <Tx> 组件既支持翻译纯文本，也支持翻译复杂的 JSX 结构。
此外，它还提供对变量、复数以及特定上下文翻译的处理能力。
<Tx> 仅限服务端使用。
运行时翻译：
<Tx> 的翻译在运行时执行。
这意味着翻译会实时进行。
参考资料
Props（属性）
Prop
Type
描述
| Prop | 描述 |
|---|---|
children | 待翻译的内容，可为纯文本或 JSX 结构。 |
context | 补充上下文，用于优化翻译，有助于消解歧义。 |
locale | 可选的 locale，用于指定翻译所用语言环境。若未提供，将默认使用你的应用所支持的、浏览器最优先的 locale。 |
行为
<Tx> 会在运行时翻译 JSX。
这意味着翻译是实时进行的，因此你可以翻译仅在运行时才可得的内容。
权衡在于：按需翻译的加载会引入延迟，速度会显著变慢。
加载期间，除非语言相近（如 en-US 与 en-GB），<Tx> 将返回 undefined，不过这种行为可以通过渲染设置进行自定义。
如果发生错误，<Tx> 将返回原始内容。
我们的建议是尽可能在构建时使用 <T>、getGT 或 useGT 完成翻译，
仅在必要时才使用按需翻译，例如 <Tx> 和 tx。
请务必遵循部署指南。
示例
基本用法
<Tx> 组件会在运行时翻译其 children（内容）。
import { Tx } from 'gt-next';
export default function Greeting() {
return (
<Tx id="greeting">
你好，世界！
</Tx>
);
}使用变量
你可以使用 <Var> 组件将 children 标注为变量。
这样可以明确哪些内容不应被翻译。
import { Tx, Var } from 'gt-next';
export default function DynamicGreeting(user) {
return (
<Tx>
你好，<Var>{user.name}</Var>
</Tx>
);
}处理复数
<T> 组件也支持通过 <Plural> 组件实现复数化（pluralization）。
import { Tx, Plural } from 'gt-next';
export default function ItemCount({ count }) {
return (
<Tx>
<Plural n={count}
singular={<>您有一个物品。</>}
plural={<>您有多个物品。</>}
/>
</Tx>
);
}限制
<Tx> 仅会翻译其子孙节点（后代）内容。
import { Tx } from 'gt-next';
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
const InvalidTranslation = ({ children }) => (<div><b>无翻译</b></div>);
export default function Example() {
return (
<Tx>
<div><b>这是有效的！</b></div> // 将被翻译
<ValidTranslation> // 将被翻译
你好，世界！
</ValidTranslation>
<InvalidTranslation /> // 不会被翻译
</Tx>
);
}注意： 一个实用的经验法则是，文件中两个 <Tx> 之间的内容（字面位于它们之间的部分）都会被翻译。
你可以随时再添加一个 <Tx> 来翻译尚未被翻译的内容，但不建议嵌套使用 <Tx> 组件。
注意事项
<Tx>组件用于在运行时翻译应用中的内容。- 使用
<Tx>组件可翻译纯文本或 JSX 结构，并支持 variables 和 pluralization。
下一步
这份指南怎么样？