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

title: Branch
description: 使用 General Translation gt-react 根据某个值有条件地渲染内容。Branch 的 API 参考。

---

`<Branch>` 组件可为翻译添加条件逻辑。你将一个值传给 `branch`，它会渲染与之匹配的 child 属性。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你所用框架对应的包中导入。*

## 概览 [#overview]

为每个可能的值提供一个 `branch` 值和一个 `child` 属性。

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

*注意：将 `<Branch>` 放在 [`<T>`](/docs/react/reference/components/t) 内，以便翻译各个分支，并将其中的动态值包裹在变量组件中，例如 [`<Var>`](/docs/react/reference/components/var)。*

## 工作方式 [#how-it-works]

* **值匹配。** `branch` 的值会与您提供的属性 键进行匹配，并渲染匹配到的属性 内容。
* **后备内容。** 如果省略 `branch`，或其值与任何属性 键都不匹配，则会渲染 `children` 作为后备内容。`<Branch>` 永远不会抛出错误。

## 属性 [#props]

| 属性                      | 描述                      | 类型                            | 可选 | 默认值 |
| ----------------------- | ----------------------- | ----------------------------- | -- | --- |
| [`branch`](#branch)     | 用于选择内容的值。               | `string \| number \| boolean` | 是  | —   |
| [`children`](#children) | 当没有匹配的 branch 时显示的后备内容。 | `ReactNode`                   | 是  | —   |
| [`[value]`](#value)     | 特定 branch 值的内容。         | `ReactNode`                   | 是  | —   |

### `branch` [#branch]

**类型** `string | number | boolean` · **可选**

用于选择渲染哪个分支的值。当省略 `branch`，或其值与任何分支 属性 键都不匹配时，将改为渲染 `children` 作为后备内容。

### `children` [#children]

**类型** `ReactNode` · **可选**

当没有任何 `branch` 属性与 `branch` 值匹配时渲染的后备内容。

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

**类型** `ReactNode` · **可选**

每个可能的 `branch` 值对应一个 属性。每个键都对应 `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." // 普通字符串也同样适用
      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` 属性 匹配的字符串值，因此 `<Branch>` 可适用于多种使用场景。
* 将 `<Branch>` 与 [`<T>`](/docs/react/reference/components/t) 以及 [变量组件](/docs/react/guides/formatting-variables) 结合使用，即可实现已翻译的动态内容。
* 对于基于计数的内容，请使用 [`<Plural>`](/docs/react/reference/components/plural)。