Components
<Tx>
<Tx> 组件的 API 参考
概述
<Tx> 组件在运行时翻译 jsx 内容。
<Tx>
Today, I went to
{" the store"}
<p>
to <b>buy</b> some <i>groceries</i>.
</p>
</Tx> <Tx> 组件支持翻译纯文本以及复杂的 JSX 结构。
此外，它还提供了处理变量、复数和特定上下文翻译的功能。
<Tx> 仅支持服务端渲染。
运行时翻译：
<Tx> 的翻译在运行时进行。
这意味着翻译会实时执行。
参考
属性
| Prop | Type | Default |
|---|---|---|
locale?? | string | undefined |
context?? | string | undefined |
children? | any | - |
说明
| 属性 | 说明 |
|---|---|
children | 需要被翻译的内容。可以包含纯文本或 JSX 结构。 |
context | 用于细化翻译的额外上下文。适用于解决有歧义的短语。 |
locale | 可选的翻译语言环境。如果未指定，将默认使用浏览器支持的首选语言环境。 |
行为
<Tx> 在运行时翻译 jsx。
这意味着翻译是在实时进行的，因此你可以翻译仅在运行时才知道的内容。
其权衡是，在等待按需翻译加载时会有延迟，速度明显较慢。
在加载过程中，除非语言非常相近（如 en-US 与 en-GB），否则 <Tx> 会返回 undefined，不过这种行为可以通过渲染设置进行自定义。
如果发生错误，<Tx> 会返回原始内容。
我们的建议是，尽可能在构建时使用 <T>、getGT() 或 useGT() 进行翻译，
仅在必要时才使用按需翻译，如 <Tx> 和 tx()。
请务必遵循此处的部署指南。
示例
基本用法
<Tx> 组件会在运行时翻译其子元素。
import { Tx } from 'gt-next';
export default function Greeting() {
return (
<Tx id="greeting">
Hello, world!
</Tx>
);
}使用变量
你可以使用 <Var> 组件将子元素标记为变量。
这允许你标记不应被翻译的内容。
import { Tx, Var } from 'gt-next';
export default function DynamicGreeting(user) {
return (
<Tx>
Hello, <Var>{user.name}</Var>
</Tx>
);
}处理复数
<T> 组件也支持通过 <Plural> 组件进行复数处理。
import { Tx, Plural } from 'gt-next';
export default function ItemCount({ count }) {
return (
<Tx>
<Plural n={count}
singular={<>You have an item.</>}
plural={<>You have items.</>}
/>
</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> // will be translated
<ValidTranslation> // will be translated
Hello, world!
</ValidTranslation>
<InvalidTranslation /> // will not be translated
</Tx>
);
}注意： 一个很好的经验法则是，任何字面上位于文件中两个 <Tx> 之间的内容都会被翻译。
你始终可以添加另一个 <Tx> 来翻译未被翻译的内容，不过不推荐嵌套 <Tx> 组件。
注意事项
<Tx>组件旨在在你的应用程序中运行时翻译内容。- 使用
<Tx>组件可以翻译纯文本或 JSX 结构，包括变量和复数形式。
后续步骤
这份指南怎么样？