# General Translation React SDKs (gt-react, gt-next): Branch
URL: https://generaltranslation.com/ja/docs/react/reference/components/branch.mdx
---

title: Branch
description: General Translation の gt-react を使って、値に応じてコンテンツを条件付きでレンダリングします。Branch の API リファレンス。

---

`<Branch>` コンポーネントは、翻訳に条件分岐ロジックを追加します。値を `branch` に渡すと、対応する child prop をレンダリングします。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、実際にはお使いのフレームワークのパッケージから import してください。*

## 概要 [#overview]

取りうる各値に対して、`branch` の値と child prop を指定します。

```tsx
<Branch
  branch={status}
  active={<p>The user is active.</p>}
  inactive={<p>The user is inactive.</p>}
/>
```

*注: 分岐を翻訳するには、[`<T>`](/docs/react/reference/components/t) の中に `<Branch>` を配置し、その中の動的な値は [`<Var>`](/docs/react/reference/components/var) などの variable component で囲んでください。*

## 動作の仕組み [#how-it-works]

* **値のマッチング。** `branch` の値は、指定した prop の キー と照合されます。一致した prop の内容がレンダリングされます。
* **フォールバック。** `branch` が省略されている場合、またはその値がどの prop の キー とも一致しない場合は、`children` がフォールバックとしてレンダリングされます。`<Branch>` が例外をスローすることはありません。

## Props [#props]

| Prop                    | 説明                                   | Type                          | 任意 | デフォルト |
| ----------------------- | ------------------------------------ | ----------------------------- | -- | ----- |
| [`branch`](#branch)     | 表示するコンテンツを選択する値。                     | `string \| number \| boolean` | はい | —     |
| [`children`](#children) | 一致する branch がない場合に表示されるフォールバックコンテンツ。 | `ReactNode`                   | はい | —     |
| [`[value]`](#value)     | 特定の branch 値に対応するコンテンツ。              | `ReactNode`                   | はい | —     |

### `branch` [#branch]

**型** `string | number | boolean` · **任意**

どの branch をレンダリングするかを選ぶための値です。`branch` を省略した場合、またはその値がどの branch prop のキーにも一致しない場合は、代わりに `children` がフォールバックとしてレンダリングされます。

### `children` [#children]

**型** `ReactNode` · **任意**

どの `branch` prop も `branch` の値に一致しない場合にレンダリングされるフォールバックコンテンツ。

### `[value]` [#value]

**Type** `ReactNode` · **Optional**

取り得る `branch` の各値に対応する prop です。各キーは `branch` の値に対応しており、一致した値の内容がレンダリングされます。JSX の代わりに文字列も指定できます。

## 例 [#examples]

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // plain stringも使えます
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```

```tsx title="BranchExample.tsx"
import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch
      branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight] フォールバック
    </Branch>
  );
}
```

```tsx title="BranchExample.tsx"
import { T, Branch, Var } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <T>
      <Branch
        branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

## メモ [#notes]

* Branchキーには、`branch` prop に一致する任意の文字列値を使用できるため、`<Branch>` はさまざまなユースケースに対応できます。
* 翻訳された動的コンテンツでは、`<Branch>` を [`<T>`](/docs/react/reference/components/t) や [variable components](/docs/react/guides/formatting-variables) と組み合わせて使用してください。
* 数に応じて変化するコンテンツには、[`<Plural>`](/docs/react/reference/components/plural) を使用してください。