# react-native: Branch
URL: https://generaltranslation.com/es/docs/react-native/api/components/branch.mdx
---
title: Branch
description: Referencia de la API del componente Branch
---

{/* GENERADO AUTOMÁTICAMENTE: No edites directamente. Edita el template en content/docs-templates/. */}


## Descripción general

El componente `<Branch>` te permite añadir lógica condicional a una traducción.

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>
```

Pasas un valor al parámetro `branch`, y este se corresponde con un valor de salida según las claves que proporciones.


## Referencia

### Propiedades

<TypeTable
  type={{
  "branch": {
      description: 'El nombre de la branch que se va a renderizar.',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'Contenido de respaldo',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "[key]: string": {
      type: 'string | JSX.Element',
      optional: false,
  },
}}
/>

La sintaxis `[key]: string` indica claves arbitrarias que representan posibles branches.
Por ejemplo, se pueden agregar branches como `active` e `inactive` como parámetros.

| Prop            | Descripción                                                                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `branch`        | El nombre de la branch que se va a renderizar.                                                                                                                     |
| `children`      | Contenido de respaldo que se renderiza si no se encuentra ninguna branch coincidente.                                                                              |
| `[key]: string` | Branches que representan el contenido posible para el valor de branch dado. Cada clave corresponde a una branch y su valor es el contenido que se va a renderizar. |

### Devuelve

`JSX.Element` que contiene el contenido correspondiente al `branch` especificado o el contenido de respaldo.

### Lanza

`Error` si no se proporciona la prop `branch` o si no es válida.

## Ejemplos

### Uso básico

`<Branch>` debe tener una salida distinta para cada valor posible de la prop `branch`.

En este ejemplo, se usa el valor `user.hairColor` para determinar la salida.
Hemos definido las props `black`, `brown` y `blonde` para que coincidan con los posibles valores de `user.hairColor`.

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

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." // (puedes pasar una cadena si lo prefieres)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### Contenido de respaldo

Los `children` siempre se usarán como contenido de respaldo si ninguna prop coincide con el valor pasado a `branch`.

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

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>
  );
}
```


### Traducir Branch

Si quieres traducir el contenido, envuélvelo en un componente `<T>`.

```jsx title="BranchExample.jsx" copy
import { T, Branch } from 'gt-react-native';

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### Añadir variables

Si quieres mostrar valores dinámicos en la branch, asegúrate de envolverlos en los componentes `<Currency>`, `<DateTime>`, `<Num>` o `<Var>`.

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <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>
  );
}
```

***


## Notas

* Las claves de branch pueden ser cualquier cadena que coincida con la prop `branch`. Esta flexibilidad facilita adaptar `<Branch>` a una amplia variedad de casos de uso.
* Combina `<Branch>` con otros componentes, como `<T>` para traducciones y [componentes de variable](/docs/react-native/guides/variables) para contenido dinámico, para crear interfaces completas y localizadas.

## Próximos pasos

* Para ver usos y ejemplos más avanzados, consulta [Uso de componentes de bifurcación](/docs/react-native/guides/branches).