<T>

概述

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

<T id="example"> // [!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> 将返回原始内容。

在开发过程中，按需翻译会有延迟。这种延迟在生产构建中不会发生，因为所有内容都已被翻译。

示例

基本用法

<T> 组件可以使用 id 和其子元素翻译简单的字符串。请记住，<T> 组件必须在 <GTProvider> 内使用才能访问翻译。

SimpleTranslation.jsx

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

使用变量

<T> 组件可以包含变量以在翻译中实现动态内容。

DynamicGreeting.jsx

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

使用复数

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

ItemCount.jsx

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

限制

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

DynamicContent.jsx

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

<T> 函数翻译其后代。

Example.jsx

import { T } from 'gt-react';
 
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-react 中本地化的主要方法。
使用 <T> 组件翻译纯文本或 JSX 结构，包括变量和复数形式。
确保 <T> 组件被包裹在 <GTProvider> 中以访问翻译上下文。

下一步

查看更高级的功能，如按需翻译、变量、上下文和处理复数，请参阅<T> 设计模式文档。
对于翻译字符串，请查看useGT()。
查看使用变量组件和使用分支组件以获取更高级的翻译模式。

<T>

在本页面