<T>
<T> 组件的 API 参考
概述
<T> 组件是 gt-react 中的主要翻译方法。
<T id="example"> // [!code highlight]
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 密钥以启用此行为。
加载时，除非语言相近（如 en-US 与 en-GB），否则 <T> 会返回 undefined，不过这种行为可以通过渲染设置自定义。
如果发生错误，<T> 会返回原始内容。
在开发环境中按需翻译时，你会看到延迟。 这种延迟在生产构建时不会出现，因为所有内容都会提前翻译好。
示例
基本用法
<T> 组件可以使用 id 和其子元素来翻译简单字符串。
请记住，<T> 组件必须在 <GTProvider> 内部使用，才能访问翻译内容。
import { T } from 'gt-react';
export default function Greeting() {
return (
<T id="greeting"> // [!code highlight]
Hello, world!
</T>
);
}使用变量
<T> 组件可以在翻译中包含变量，以实现动态内容。
import { T, Var } from 'gt-react';
export default function DynamicGreeting(user) {
return (
<T id="greeting">
Hello, <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={<>You have an item.</>}
plural={<>You have items.</>}
/> // [!code highlight]
</T>
);
}限制
<T> 组件不会翻译动态内容。
import { T } from 'gt-react';
export default function DynamicContent({greeting}) {
return (
<T>
{greeting} // will create an error // [!code highlight]
</T>
);
}<T> 函数会翻译其后代内容。
import { T } from 'gt-react';
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 // [!code highlight]
<ValidTranslation> // will be translated // [!code highlight]
Hello, world! // [!code highlight]
</ValidTranslation> // [!code highlight]
<InvalidTranslation /> // will not be translated
</T>
);
}注意： 一个很好的经验法则是，任何字面上位于文件中两个 <T> 之间的内容都会被翻译。
你始终可以添加另一个 <T> 来翻译未被翻译的内容，但不推荐嵌套 <T> 组件。
注意事项
<T>组件用于在你的应用中翻译内容。它是gt-react中本地化的主要方式。- 使用
<T>组件可以翻译纯文本或 JSX 结构，包括变量和复数形式。 - 请确保
<T>组件被包裹在<GTProvider>中，以便访问翻译上下文。
后续步骤
这份指南怎么样？