<T>
<T> 组件的 API 参考
概述
<T> 组件是 gt-next 中的主要翻译方法。
<T>
Today, I went to
{" the store"}
<p>
to <b>buy</b> some <i>groceries</i>.
</p>
</T><T> 组件支持翻译纯文本以及复杂的 JSX 结构。
此外，它还提供了处理变量、复数和上下文特定翻译的功能。
构建时翻译：
<T> 翻译在构建时进行。
这意味着翻译在部署前发生，以减少延迟。
请确保遵循此处的部署指南。
参考
属性
| Prop | Type | Default |
|---|---|---|
context?? | string | undefined |
id? | string | - |
children? | any | - |
描述
| 属性 | 描述 |
|---|---|
children | 需要被翻译的内容。可以包含纯文本或 JSX 结构。 |
id | 翻译字符串的唯一标识符。确保在应用中实现一致的翻译。 |
context | 用于细化翻译的额外上下文。适用于解决歧义短语。 |
返回值
React.JSX.Element|undefined，包含根据所提供配置渲染的翻译内容或备用内容。
行为
生产环境
在 CD 流程中，任何位于 <T> 内部的子元素都会在你的应用部署前被翻译。
这确保了所有语言环境下的加载速度都很快，但它只能翻译构建时已知的内容。
生成后，翻译内容会根据你的配置（1）存储在 CDN，或（2）存储在应用的构建输出中。 之后，翻译后的内容会被提供给你的用户。 如果找不到翻译内容，则会回退到原始内容。
请务必遵循此处的部署指南。
开发环境
在开发过程中，<T> 函数会按需翻译内容。
这对于原型设计你的应用在不同语言下的外观非常有用。
请记得在环境中添加 Dev API key 以启用此行为。
加载时，除非语言相近（如 en-US 与 en-GB），否则 <T> 会返回 undefined，不过这种行为可以通过渲染设置进行自定义。
如果发生错误，<T> 会返回原始内容。
在开发环境中按需翻译时，你会看到延迟。
这种延迟在生产构建时不会出现，除非内容被明确地按需翻译，
即通过使用 <Tx> 或 tx()。
示例
基本用法
<T> 组件会翻译其子元素。
import { T } from 'gt-next';
export default function Greeting() {
return (
<T>
Hello, world!
</T>
);
}使用变量
您可以使用 <Var> 组件将子元素标记为变量。
这允许您标记不应被翻译的内容。
通常，<Var> 组件包装动态内容。
import { T, Var } from 'gt-next';
export default function DynamicGreeting(user) {
return (
<T>
Hello, <Var>{user.name}</Var>!
</T>
);
}使用复数形式
<T> 组件还支持使用 <Plural> 组件进行复数化。
import { T, Plural } from 'gt-next';
export default function ItemCount({ count }) {
return (
<T>
<Plural n={count}
singular={<>You have an item.</>}
plural={<>You have items.</>}
/>
</T>
);
}限制
<T> 组件不会翻译动态内容。
import { T } from 'gt-next';
export default function DynamicContent({greeting}) {
return (
<T>
{greeting} {/* will create an error */}
</T>
);
}<T> 函数翻译其后代元素。
import { T } 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 (
<T>
<div><b>This is valid!</b></div> {/* will be translated */}
<ValidTranslation>
Hello, world! {/* will be translated */}
</ValidTranslation>
<InvalidTranslation /> {/* will not be translated */}
</T>
);
}注意： 一个好的经验法则是，文件中字面上位于两个 <T> 之间的任何内容都会被翻译。
您总是可以添加另一个 <T> 来翻译未被翻译的内容，不过不建议嵌套 <T> 组件。
注意事项
<T>组件用于在你的应用中翻译内容。它是gt-next中本地化的主要方式。- 使用
<T>组件可以翻译纯文本或 JSX 结构，包括变量和复数形式。 - 如果你在客户端使用
<T>组件，请确保它被包裹在<GTProvider>中，以便访问翻译上下文。
后续步骤
这份指南怎么样？