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

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}


## 概述

`<Var>` 组件用于渲染不应翻译的内容。
它适合用于渲染变量、代码片段或其他无需翻译的内容。
此外，它也适用于渲染需要保密的内容，例如 API 密钥或个人信息。

```jsx
<Var>{user.name}</Var>
```

`<Var>` 组件始终在 `<T>` 组件内部使用。
可以将它视为动态值的通用兜底项，用于处理不属于 `<Currency>`、`<DateTime>` 或 `<Num>` 类别的动态值。


## 参考

### 属性

<TypeTable
  type={{
      "children?": {
          type: 'JSX.Element',
          optional: true,
          default: 'undefined',
      },
      "name?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
      "value?": {
          type: 'string',
          optional: true,
          default: 'undefined',
      },
  }}
/>

### 说明

| Prop       | 说明                                  |
| ---------- | ----------------------------------- |
| `children` | 在组件内部渲染的内容。如果提供了该属性，其优先级高于 `value`。 |
| `value`    | 可选的默认值；当未提供 `children` 时显示。可以是字符串。  |

### 返回值

包含不应翻译内容的 `JSX.Element`。

***

## 示例

### 基本示例

`<Var>` 组件必须在 `<T>` 组件内使用。

```jsx title="Address.jsx" copy
import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

***


## 注意事项

* 变量组件对于在翻译内容中保留不可翻译的动态内容至关重要。
* 始终在 `<T>` 组件内使用变量组件。
* `<Num>`、`<Currency>` 和 `<DateTime>` 等组件提供本地化功能，以确保格式准确无误。

## 后续步骤

* 如需进一步了解 `<Var>` 组件以及 `<Currency>`、`<DateTime>` 和 `<Num>` 等其他变量组件的详细说明和使用示例，请参阅[使用变量组件](/docs/next/guides/variables)文档。