# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Branch>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/branch.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 値に応じてコンテンツを条件付きでレンダリングします。`<Branch>` コンポーネントの API リファレンス。

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

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#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]

*例では `gt-react` からインポートしています。代わりに、ご使用のフレームワークのパッケージからインポートしてください。*

```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." // プレーンな文字列も使えます
      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>}
    >
      {/* [!code highlight] */}
      <p>Their hair is unknown.</p>
    </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>}
      >
        {/* [!code highlight] */}
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </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) を使用してください。

## Sitemap

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