概览

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

<T>
    今天我去了
    {" 商店"}
    <p>
        <b>买</b>了一些<i>食品杂货</i>。
    </p>
</T>

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

参考资料

Props

描述

返回值

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

行为

生产环境

在 CD 过程中，任何位于 <T> 内的 children 都会在应用部署前被翻译。 这可确保所有 locale 的加载速度更快，但它只能翻译构建时已知的内容。

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

请务必遵循此处的部署指南。

开发

在开发期间，<T> 函数会按需翻译内容。 这有助于快速预览应用在不同语言下的效果。 请记得在环境中添加 Dev API key 以启用此行为。

加载时，除非语言相近（如 en-US 与 en-GB），否则 <T> 会返回 undefined；不过可以通过渲染设置自定义此行为。 如果发生 Error，<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 结构，包括变量与复数形式处理。
• 如果在客户端使用 <T> 组件，请确保将其包裹在 <GTProvider> 中以访问翻译上下文。

后续步骤

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