# react-native: Var
URL: https://generaltranslation.com/zh/docs/react-native/api/components/var.mdx
---
title: Var
description: Var 组件 API 参考
---

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


## 概述

`<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`，则显示该值。可以是 `string`。 |

### 返回

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

***

## 示例

### 基本示例

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

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

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