# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Var>`
URL: https://generaltranslation.com/zh/docs/react/reference/components/var.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 在翻译中渲染动态值而不翻译它。`<Var>` 组件的 API 参考。

`<Var>` 组件用于渲染不应被翻译的动态内容。可用于值、代码片段，或 API 密钥、个人数据等私密信息，从而让周围文本保持可翻译。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。*

## 概览 [#overview]

将 `<Var>` 放在 [`<T>`](/docs/react/reference/components/t) 内，即可把某个值标记为变量。该值会按原样渲染，句子的其余部分则会围绕它进行翻译。

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*注意：`<Var>` 始终在 [`<T>`](/docs/react/reference/components/t) 内使用。可以把它理解为动态值的通用兜底项，用于那些不适合使用 [`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency) 或 [`<DateTime>`](/docs/react/reference/components/datetime) 的情况。*

## 工作原理 [#how-it-works]

* **不会被翻译。** `<Var>` 的内容不会发送到 General Translation API。它们会完全按传入的内容原样渲染，从而保持动态值或敏感值不变。
* **保留周围文本的翻译。** 将某个值标记为变量后，周围文本仍可作为一个可翻译的单独条目，变量则会根据每个区域设置插入到正确的位置。

## 属性 [#props]

| 属性                      | 描述             | 类型          | 可选 | 默认值 |
| ----------------------- | -------------- | ----------- | -- | --- |
| [`children`](#children) | 要渲染的值，不会被翻译。   | `ReactNode` | 否  | —   |
| [`name`](#name)         | 该条目的变量名，用于元数据。 | `string`    | 是  | —   |

### `children` [#children]

**类型** `ReactNode` · **必填**

在组件内渲染的内容。它会原样传递，不会被翻译。

### `name` [#name]

**类型** `string` · **可选**

变量的可选名称，用于元数据，并用于在翻译条目中标识该值。

## 示例 [#examples]

*示例从 `gt-react` 导入；请改为从所用框架的 package 导入。*

```tsx title="Address.tsx"
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>
  );
}
```

## 注意事项 [#notes]

* 变量组件可将不可翻译的动态内容与翻译内容分离。
* 始终在 [`<T>`](/docs/react/reference/components/t) 内使用 `<Var>`。
* 如需按区域设置进行格式化，请改用 [`<Num>`](/docs/react/reference/components/num)、[`<Currency>`](/docs/react/reference/components/currency) 或 [`<DateTime>`](/docs/react/reference/components/datetime)。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.