<T>

概述

<T> 组件是 gt-next 中的主要翻译方法。

<T> // [!code highlight]
    今天，我去了
    {" 商店"}
    <p>
        去 <b>买</b> 一些 <i>杂货</i>。
    </p>
</T>

<T> 组件支持翻译纯文本以及复杂的 JSX 结构。此外，它还提供处理变量、复数和上下文特定翻译的功能。

构建时翻译： <T> 翻译在构建时发生。这意味着翻译在部署之前进行，以减少延迟。请确保遵循此处的部署指南。

参考

属性

Prop	Type	Default
`children?`	`any`	-
`id?`	`string`	-
`context??`	`string`	`undefined`

描述

属性	描述
`children`	要翻译的内容。这可以包括纯文本或JSX结构。
`id`	翻译字符串的唯一标识符。这确保了应用程序中翻译的一致性。
`context`	额外的上下文以优化翻译。对于解决模棱两可的短语非常有用。

返回值

React.JSX.Element|undefined 包含根据提供的配置渲染的翻译或备用内容。

行为

生产环境

在 CD 过程中，任何 <T> 内的子元素将在应用程序部署之前被翻译。这确保了所有语言环境的快速加载时间，但它只能翻译构建时已知的内容。

一旦生成，翻译内容将根据您的配置（1）存储在 CDN 中或（2）存储在应用程序的构建输出中。从那里，翻译后的内容将提供给您的用户。如果找不到翻译，它将回退到原始内容。

请确保遵循此处的部署指南。

开发环境

在开发过程中，<T> 函数将按需翻译内容。这对于原型设计您的应用程序在不同语言中的外观非常有用。请记得在您的环境中添加开发 API 密钥以启用此行为。

加载时，除非语言相似（如 en-US 与 en-GB），否则 <T> 将返回未定义，尽管此行为可以通过渲染设置进行自定义。如果发生错误，<T> 将返回原始内容。

在开发过程中，按需翻译时会看到延迟。除非内容被明确按需翻译，否则此延迟不会在生产构建中发生，即，通过使用 <Tx> 或 tx()。

示例

基本用法

<T> 将翻译其子元素。

SimpleTranslation.jsx

import { T } from 'gt-next';
 
export default function Greeting() {
    return (
        <T> // [!code highlight]
            你好，世界！
        </T> 
    );
}

使用变量

您可以使用 <Var> 组件将子元素标记为变量。这允许您标记不应翻译的内容。通常，<Var> 组件包裹动态内容。

DynamicGreeting.jsx

import { T, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <T>
            你好，<Var>{user.name}</Var>！ // [!code highlight]
        </T>
    );
}

使用复数

<T> 组件还支持使用 <Plural> 组件进行复数化。

ItemCount.jsx

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count}  
                singular={<>你有一个项目。</>}  
                plural={<>你有多个项目。</>}  
            />  // [!code highlight]
        </T>
    );
}

限制

<T> 组件不翻译动态内容。

DynamicContent.jsx

import { T } from 'gt-next';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // 将产生错误 // [!code highlight]
        </T>
    );
}

<T> 函数翻译其后代。

Example.jsx

import { T } from 'gt-next';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>不翻译</b></div>);
 
export default function Example() {
    return (
        <T>
            <div><b>这是有效的！</b></div> // 将被翻译 // [!code highlight]
 
            <ValidTranslation> // 将被翻译 // [!code highlight]
                你好，世界！ // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // 将不被翻译
        </T>
    );
}

注意： 一个好的经验法则是，文件中任何字面上位于两个 <T> 之间的内容都将被翻译。您始终可以添加另一个 <T> 来翻译未被翻译的内容，但不推荐嵌套 <T> 组件。

注意事项

<T> 组件旨在翻译应用程序中的内容。它是 gt-next 中本地化的主要方法。
使用 <T> 组件翻译纯文本或 JSX 结构，包括变量和复数形式。
如果在客户端使用 <T> 组件，请确保它被包裹在 <GTProvider> 中以访问翻译上下文。

下一步

对于按需翻译，请查看 <Tx> 组件。
查看更多高级功能，请参阅 <T> 参考。
对于翻译字符串，请查看 tx()、getGT() 和 useGT()。
查看使用变量组件和使用分支组件以获取更高级的翻译模式。

<T>

在本页面