# react-native: Var
URL: https://generaltranslation.com/ja/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>` のいずれにも当てはまらない動的な値をまとめて扱うものと考えてください。


## リファレンス

### Props

<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-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) を参照してください。