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> 组件进行复数处理。
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>No translation</b></div>);
export default function Example() {
return (
<Tx>
<div><b>This is valid!</b></div> // 会被翻译
<ValidTranslation> // 会被翻译
Hello, world!
</ValidTranslation>
<InvalidTranslation /> // 不会被翻译
</Tx>
);
}注意： 一个实用的原则是，文件中两个 <Tx> 之间的任何内容（确实位于两者之间的内容）都会被翻译。
你随时可以再添加一个 <Tx> 来翻译尚未被翻译的内容，不过不建议嵌套使用 <Tx> 组件。
注意事项
<Tx>组件用于在运行时为你的应用翻译内容。- 使用
<Tx>组件翻译纯文本或 JSX 结构，包括变量和复数规则。
下一步
本指南如何?