# gt-react: General Translation React SDK: Var
URL: https://generaltranslation.com/zh/docs/react/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-react'

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/react/guides/variables)文档。