# gt-next: General Translation Next.js SDK: Tx
URL: https://generaltranslation.com/zh/docs/next/api/components/tx.mdx
---
title: Tx
description: Tx 组件 API 参考
---

## 概述

`<Tx>` 组件会在 运行时 对 JSX 内容进行翻译。

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

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

<Callout>
  **运行时翻译：**
  `<Tx>` 的翻译发生在 运行时。
  这意味着翻译会在运行时实时执行。
</Callout>

***


## 参考

### 属性

<TypeTable
  type={{
"children": {
    type: 'any',
    optional: false,
},
"context?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
"locale?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
"maxChars?": {
    type: 'number',
    optional: true,
    default: 'undefined',
},
}}
/>

### 说明

| Prop       | Description                       |
| ---------- | --------------------------------- |
| `children` | 要翻译的内容。可以包含纯文本或 JSX 结构。           |
| `context`  | 用于优化翻译的附加上下文。有助于消除含义不明确的短语。       |
| `locale`   | 可选的翻译区域设置。默认使用浏览器首选且受你的应用支持的区域设置。 |
| `maxChars` | 可选的最大翻译字符数。该库会严格执行此限制。            |

***

## 行为

`<Tx>` 会在 运行时 翻译 JSX。
这意味着翻译是实时进行的，因此你可以翻译那些只有在 运行时 才能确定的内容。
代价是，等待按需翻译加载时会有延迟，整体速度也会明显更慢。

在加载期间，`<Tx>` 会返回 undefined，除非语言相近 (例如 en-US 和 en-GB) ，不过这种行为可以通过渲染设置自定义。
如果发生错误，`<Tx>` 会返回原始内容。

我们的建议是，尽可能使用 [`<T>`](/docs/next/api/components/t)、[`getGT`](/docs/next/api/strings/use-gt) 或 [`useGT`](/docs/next/api/strings/use-gt) 在 构建时 翻译所有内容，
仅在必要时才使用按需翻译，例如 `<Tx>` 和 [`tx`](/docs/next/api/strings/tx)。

请务必遵循[此处的部署指南](/docs/next/tutorials/quickdeploy)。

***

## 示例

### 基本用法

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

```jsx title="SimpleTranslation.jsx" copy
import { Tx } from 'gt-next/server';

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx>
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```

### 使用变量

你可以使用 `<Var>` 组件将子元素标记为变量。
这样就能标记出不应翻译的内容。

```jsx title="DynamicGreeting.jsx" copy
import { Tx, Var } from 'gt-next/server';

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}
```

### 支持复数形式

`<T>` 组件也支持通过 `<Plural>` 组件处理复数形式。

```jsx title="ItemCount.jsx" copy
import { Tx, Plural } from 'gt-next/server';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```

### 限制

`<Tx>` 函数仅会翻译其后代节点中的内容。

```jsx title="Example.jsx" copy
import { Tx } from 'gt-next/server';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <Tx>
            {/* [!code highlight] */}
            <div><b>This is valid!</b></div> // 将被翻译 

            {/* [!code highlight] */}
            <ValidTranslation> // 将被翻译 
            {/* [!code highlight] */}
                Hello, world!
            {/* [!code highlight] */}
            </ValidTranslation>

            <InvalidTranslation /> // 不会被翻译
        </Tx>
    );
}
```

<Callout>
  **注意：** 一个简单的经验法则是：文件中两个 `<Tx>` 之间*原样*写出的任何内容都会被翻译。
  如果有内容没有被翻译，你也可以再添加一个 `<Tx>`；不过不建议嵌套 `<Tx>` 组件。
</Callout>

***

## 注意事项

* `<Tx>` 组件专为在应用程序的 运行时 翻译内容而设计。
* 使用 `<Tx>` 组件可翻译纯文本或 JSX 结构，包括变量和复数形式。

## 后续步骤

* 对于构建时翻译，请参阅 [`<T>`](/docs/next/api/components/t) 组件。
* 如需了解更多高级功能，请参阅 [`<T>` 参考文档](/docs/next/guides/t)。
* 如需翻译字符串，请参阅 [`tx`](/docs/next/api/strings/tx)、[`getGT`](/docs/next/api/strings/get-gt) 和 [`useGT`](/docs/next/api/strings/use-gt)。