General Translation  
仪表盘博客Discord
Components

<Tx>

<Tx> 组件的 API 参考

概述

<Tx> 组件在运行时翻译jsx内容。

<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx>

<Tx> 组件支持翻译纯文本以及复杂的JSX结构。 此外，它还提供了处理变量、复数形式和特定上下文翻译的功能。 <Tx> 仅在服务器端使用。

运行时翻译： <Tx> 翻译发生在运行时。 这意味着翻译将实时执行。

参考

属性

PropTypeDefault
children?
any
-
context??
string
undefined
locale??
string
undefined

描述

属性描述
children要翻译的内容。这可以包括纯文本或JSX结构。
context额外的上下文以优化翻译。对于解决模棱两可的短语很有用。
locale用于翻译的可选语言环境。默认为浏览器最优先的、您的应用程序支持的语言环境。

行为

<Tx> 在运行时翻译 jsx。 这意味着翻译是实时进行的，因此您可以翻译仅在运行时才知道的内容。 权衡之下，等待按需翻译加载时会有延迟，速度明显较慢。

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

我们的建议是尽可能在构建时使用 <T>、getGT() 或 useGT() 进行翻译， 仅在必要时使用按需翻译，如 <Tx> 和 tx()。

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

示例

基本用法

<Tx> 组件将在运行时翻译其子元素。

SimpleTranslation.jsx
import { Tx } from 'gt-next';
 
export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </Tx> 
    );
}

使用变量

你可以使用 <Var> 组件来标记子元素为变量。 这允许你标记不应被翻译的内容。

DynamicGreeting.jsx
import { Tx, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <Tx>
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}

使用复数形式

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

ItemCount.jsx
import { Tx, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

限制

<Tx> 函数只翻译其后代元素。

Example.jsx
import { Tx } from 'gt-next';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);
 
export default function Example() {
    return (
        <Tx>
            <div><b>This is valid!</b></div> // will be translated 
 
            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>
 
            <InvalidTranslation /> // will not be translated
        </Tx>
    );
}

注意： 一个好的经验法则是，任何在文件中两个 <Tx> 之间字面上的内容都将被翻译。 你始终可以添加另一个 <Tx> 来翻译未被翻译的内容，尽管不建议嵌套 <Tx> 组件。

注意事项

  • <Tx> 组件旨在在运行时翻译应用程序中的内容。
  • 使用 <Tx> 组件翻译纯文本或 JSX 结构，包括变量和复数形式。

下一步

在 GitHub 上编辑

<T>

<T> 组件的 API 参考

<GTProvider>

<GTProvider> 组件的 API 参考

在本页面