概览

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

<T>
    今天，我去了
    {" 商店"}
    <p>
        <b>买</b>一些<i>生活用品</i>。
    </p>
</T>

<T> 组件既可翻译纯文本，也可处理复杂的 JSX 结构。 此外，它还提供了处理变量、复数和基于上下文的翻译等功能。

参考资料

属性

描述

返回值

React.JSX.Element|undefined，返回根据提供的配置渲染的译文或回退内容。

行为

生产环境

在 CD（持续交付/持续部署）流程中，任何位于 <T> 内的 children 都会在应用部署前完成翻译。 这可确保所有 locale 的加载速度更快，但只能翻译构建时已知的内容。

生成后，翻译将根据你的配置（1）存储在 CDN（内容分发网络），或（2）存储在应用的构建产物中。 随后，这些译文将提供给你的用户。 如果未找到对应翻译，将会回退（fallback）到原始内容。

请务必遵循此部署指南。

开发环境

在开发过程中，<T> 函数会按需翻译内容。 这有助于快速预览你的应用在不同语言下的呈现效果。 请记得在环境中添加 Dev API key 以启用该功能。

在加载期间，除非语言相近（如 en-US 与 en-GB），否则 <T> 将返回 undefined；不过你可以通过渲染设置自定义该行为。 如果发生错误，<T> 将返回原始内容。

在开发环境进行按需翻译时，你可能会看到延迟。 该延迟在生产构建中不会出现，除非内容被明确地按需翻译， 即通过使用 <Tx> 或 tx。

示例

基本用法

<T> 会翻译其 children（子内容）。

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            你好，世界！
        </T>
    );
}

使用变量

你可以使用 <Var> 组件将 children 标记为变量。 这样可以标记不应被翻译的内容。 通常，<Var> 组件用于包裹动态内容。

import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            你好，<Var>{user.name}</Var>！
        </T>
    );
}

使用复数

<T> 组件也支持通过 <Plural> 组件进行复数化（pluralization）。

import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                singular={<>您有一个物品。</>} 
                plural={<>您有多个物品。</>}
            />
        </T>
    );
}

限制

<T> 组件不会翻译动态生成的内容。

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* 会导致错误 */}
        </T>
    );
}

<T> 函数会翻译其子元素。

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> {/* 将被翻译 */}

            
            <ValidTranslation>
                你好，世界！  {/* 将被翻译 */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* 不会被翻译 */}
        </T>
    );
}

注意

• <T> 组件用于在你的应用中进行内容翻译。它是 gt-next 中实现本地化的主要方式。
• 使用 <T> 组件来翻译纯文本或 JSX 结构，并支持 variables 和 pluralization。
• 如果在客户端使用 <T> 组件，请确保将其包裹在 <GTProvider> 中以获取翻译上下文。

后续步骤

• 若需按需翻译，请查看 <Tx> 组件。
• 想了解更高级的功能，请参阅 <T> 参考。
• 若要翻译字符串，请查看 tx、getGT 和 useGT。