# gt-react: General Translation React SDK: Componentes de ramificación
URL: https://generaltranslation.com/es/docs/react/guides/branches.mdx
---
title: Componentes de ramificación
description: Cómo usar componentes de ramificación para contenido condicional en las traducciones
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita el template en content/docs-templates/. */}

Los componentes de ramificación permiten mostrar contenido condicional dentro de los componentes [`<T>`](/docs/react/api/components/t). Gestionan lógica dinámica, como condiciones if/else y reglas de pluralización, y garantizan que todas las variaciones de contenido puedan traducirse correctamente.


## Componentes disponibles

* [`<Branch>`](/docs/react/api/components/branch): Contenido condicional en función de valores o estados
* [`<Plural>`](/docs/react/api/components/plural): Pluralización automática según reglas específicas de la configuración regional

## Inicio rápido

Los componentes de ramificación funcionan dentro de [`<T>`](/docs/react/api/components/t) para gestionar la lógica condicional:

```jsx
import { T, Branch, Plural, Num, Var } from 'gt-react';

function NotificationPanel({ user, messageCount }) {
  return (
    <T>
      <Branch 
        branch={user.status}
        online={<p><Var>{user.name}</Var> is currently online</p>}
        away={<p><Var>{user.name}</Var> is away</p>}
      >
        <p><Var>{user.name}</Var> status unknown</p>
      </Branch>
      
      <Plural
        n={messageCount}
        one={<p>You have <Num>{messageCount}</Num> message</p>}
        other={<p>You have <Num>{messageCount}</Num> messages</p>}
      />
    </T>
  );
}
```


## Cómo funcionan los componentes de ramificación

Los componentes de ramificación resuelven el renderizado condicional dentro de las traducciones de la siguiente manera:

1. **Reemplazan los operadores ternarios** y la lógica condicional dentro de [`<T>`](/docs/react/api/components/t)
2. **Proporcionan contenido de reserva** cuando las condiciones no coinciden con los valores esperados
3. **Permiten traducir** todas las posibles variaciones de contenido
4. **Aplican automáticamente las reglas de la configuración regional** para la pluralización

```jsx
// ❌ Esto falla - lógica condicional dentro de <T>
<T><p>{isActive ? 'User is active' : 'User is inactive'}</p></T>

// ✅ Esto funciona - lógica condicional con branching
<T>
  <Branch 
    branch={isActive} 
    true={<p>User is active</p>}
    false={<p>User is inactive</p>}
  />
</T>
```


## Guía de componentes

### Branch - Contenido condicional

Usa [`<Branch>`](/docs/react/api/components/branch) para renderizar contenido de forma condicional según valores o estados:

```jsx
// Visualización del estado del usuario
<T>
  <Branch 
    branch={user.role}
    admin={<p>Administrator Dashboard</p>}
    user={<p>User Dashboard</p>}
    guest={<p>Guest Access</p>}
  >
    <p>Access level unknown</p>
  </Branch>
</T>

// Condiciones booleanas
<T>
  <Branch 
    branch={isLoggedIn}
    true={<p>Welcome back!</p>}
    false={<p>Please log in</p>}
  />
</T>

// Niveles de suscripción
<T>
  <Branch
    branch={subscription.tier}
    free={<p>Upgrade to unlock premium features</p>}
    premium={<p>Enjoy your premium experience</p>}
    enterprise={<p>Contact support for enterprise solutions</p>}
  >
    <p>Subscription status unavailable</p>
  </Branch>
</T>
```


### Plural - Pluralización inteligente

Usa [`<Plural>`](/docs/react/api/components/plural) para contenido que cambia en función de la cantidad:

```jsx
// Pluralización básica
<T>
  <Plural
    n={itemCount}
    one={<p><Num>{itemCount}</Num> artículo en el carrito</p>}
    other={<p><Num>{itemCount}</Num> artículos en el carrito</p>}
  />
</T>

// Manejo del cero
<T>
  <Plural
    n={notifications}
    zero={<p>Sin notificaciones nuevas</p>}
    one={<p><Num>{notifications}</Num> notificación</p>}
    other={<p><Num>{notifications}</Num> notificaciones</p>}
  />
</T>

// Pluralización compleja (sigue las reglas Unicode CLDR)
<T>
  <Plural
    n={days}
    zero={<p>Vence hoy</p>}
    one={<p>Vence en <Num>{days}</Num> día</p>}
    few={<p>Vence en <Num>{days}</Num> días</p>}
    many={<p>Vence en <Num>{days}</Num> días</p>}
    other={<p>Vence en <Num>{days}</Num> días</p>}
  />
</T>
```


### Combinación con componentes de variable

Los componentes de ramificación y de variable se integran perfectamente:

```jsx
<T>
  <Branch
    branch={order.status}
    pending={
      <p>
        Order <Var>{order.id}</Var> is pending. 
        Total: <Currency currency="USD">{order.total}</Currency>
      </p>
    }
    shipped={
      <p>
        Order <Var>{order.id}</Var> shipped on <DateTime>{order.shippedDate}</DateTime>
      </p>
    }
    delivered={
      <p>Order <Var>{order.id}</Var> was delivered successfully</p>
    }
  >
    <p>Order status unknown</p>
  </Branch>
</T>
```


## Cuándo usar componentes de ramificación

### Reemplaza los operadores ternarios

Convierte la lógica condicional para usarla dentro de [`<T>`](/docs/react/api/components/t):

```jsx
// ❌ No se puede usar el operador ternario en <T>
<T>{isActive ? <p>Active user</p> : <p>Inactive user</p>}</T>

// ✅ Usa Branch en su lugar
<T>
  <Branch 
    branch={isActive}
    true={<p>Active user</p>}
    false={<p>Inactive user</p>}
  />
</T>
```


### Gestiona múltiples condiciones

Sustituye las sentencias `switch` o varias condiciones `if/else`:

```jsx
// ❌ Lógica condicional compleja
<T>
  {status === 'loading' ? <p>Loading...</p> : 
   status === 'error' ? <p>Error occurred</p> : 
   status === 'success' ? <p>Success!</p> : 
   <p>Unknown status</p>}
</T>

// ✅ Lógica de branch limpia
<T>
  <Branch
    branch={status}
    loading={<p>Loading...</p>}
    error={<p>Error occurred</p>}
    success={<p>Success!</p>}
  >
    <p>Unknown status</p>
  </Branch>
</T>
```


### Reglas de pluralización

Reemplaza la gestión manual de los plurales:

```jsx
// ❌ Pluralización manual
<T>{count === 1 ? <p>1 item</p> : <p>{count} items</p>}</T>

// ✅ Pluralización automática
<T>
  <Plural
    n={count}
    one={<p><Num>{count}</Num> item</p>}
    other={<p><Num>{count}</Num> items</p>}
  />
</T>
```


## Uso autónomo

Los componentes de ramificación pueden usarse fuera de [`<T>`](/docs/react/api/components/t) para lógica pura sin traducción:

```jsx
// Renderizado condicional puro
<Branch
  branch={theme}
  dark={<DarkModeIcon />}
  light={<LightModeIcon />}
>
  <DefaultIcon />
</Branch>

// Pluralización pura
<Plural
  n={count}
  one={<SingleItemComponent />}
  other={<MultipleItemsComponent />}
/>
```


## Problemas comunes

### Faltan claves de branch

Proporciona siempre contenido de reserva para los valores sin coincidencia:

```jsx
// ❌ Sin contenido de reserva para valores inesperados
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
  // ¿Qué pasa si userRole es "moderator"?
/>

// ✅ Incluir siempre un contenido de reserva
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
>
  <DefaultPanel /> {/* contenido de reserva para cualquier otro valor */}
</Branch>
```


### Formas plurales incompletas

Proporciona las formas plurales necesarias para tu configuración regional predeterminada:

```jsx
// ❌ Falta la forma "other"
<Plural
  n={count}
  one={<p>1 item</p>}
  // ¿Y qué pasa con 0, 2, 3, etc.?
/>

// ✅ Incluir las formas necesarias
<Plural
  n={count}
  zero={<p>No items</p>}
  one={<p>1 item</p>}
  other={<p>{count} items</p>}
/>
```


### Lógica anidada compleja

Aunque esto funciona, te recomendamos mantener simple la lógica de branch y evitar un anidamiento profundo:

```jsx
// ❌ Anidamiento complejo de branches
<Branch branch={status}>
  <Branch branch={subStatus}>
    {/* Difícil de leer y mantener */}
  </Branch>
</Branch>

// ✅ Aplana la lógica o usa múltiples componentes
<Branch
  branch={`${status}-${subStatus}`}
  active-online={<ActiveOnline />}
  active-offline={<ActiveOffline />}
  inactive-online={<InactiveOnline />}
>
  <DefaultState />
</Branch>
```

<Callout>
  Más información sobre las reglas de pluralización en la [documentación de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).
</Callout>


## Siguientes pasos

* [Guía de traducción de cadenas](/docs/react/guides/strings) - Traduce texto sin formato sin usar JSX
* [Guía de contenido dinámico](/docs/key-concepts/dynamic-content) - Gestiona la traducción en runtime
* Referencias de la API:
  * [Componente `<Branch>`](/docs/react/api/components/branch)