Componentes de ramificación
Cómo usar componentes de ramificación para contenido condicional dentro de las traducciones
Los componentes de ramificación permiten renderizar contenido condicional dentro de <T>. Gestionan lógica dinámica como sentencias if/else y reglas de pluralización, y garantizan que todas las variaciones de contenido puedan traducirse correctamente.
Componentes disponibles
<Branch>: Contenido condicional basado en value o estados<Plural>: Pluralización automática usando reglas específicas del locale
Inicio rápido
Los componentes de ramificación funcionan dentro de <T> para gestionar lógica condicional:
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> está en línea ahora</p>}
away={<p><Var>{user.name}</Var> está ausente</p>}
>
<p>Estado de <Var>{user.name}</Var> desconocido</p>
</Branch>
<Plural
n={messageCount}
one={<p>Tienes <Num>{messageCount}</Num> mensaje</p>}
other={<p>Tienes <Num>{messageCount}</Num> mensajes</p>}
/>
</T>
);
}Cómo funcionan los componentes de ramificación
Los componentes de ramificación resuelven el renderizado condicional dentro de las traducciones al:
- Reemplazar operadores ternarios y la lógica condicional dentro de
<T> - Proporcionar contenido de respaldo predeterminado cuando las condiciones no coinciden con los valores esperados
- Permitir la traducción de todas las posibles variaciones de contenido
- Seguir las reglas de locale para la pluralización automáticamente
// ❌ Esto falla: lógica condicional en <T>
<T><p>{isActive ? 'El usuario está activo' : 'El usuario está inactivo'}</p></T>
// ✅ Esto funciona: lógica condicional con bifurcación
<T>
<Branch
branch={isActive}
true={<p>El usuario está activo</p>}
false={<p>El usuario está inactivo</p>}
/>
</T>Guía de componentes
<Branch> - Contenido condicional
Usa <Branch> para cualquier renderizado condicional basado en value o estados:
// Visualización del estado del usuario
<T>
<Branch
branch={user.role}
admin={<p>Panel de administrador</p>}
user={<p>Panel de usuario</p>}
guest={<p>Acceso como invitado</p>}
>
<p>Nivel de acceso desconocido</p>
</Branch>
</T>
// Condiciones booleanas
<T>
<Branch
branch={isLoggedIn}
true={<p>¡Bienvenido de nuevo!</p>}
false={<p>Por favor, inicia sesión</p>}
/>
</T>
// Niveles de suscripción
<T>
<Branch
branch={subscription.tier}
free={<p>Actualiza para desbloquear funciones prémium</p>}
premium={<p>Disfruta de tu experiencia prémium</p>}
enterprise={<p>Contacta con soporte para soluciones empresariales</p>}
>
<p>Estado de la suscripción no disponible</p>
</Branch>
</T><Plural> - Pluralización inteligente
Usa <Plural> para contenido que varía según la cantidad:
// 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>No hay 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 de 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 variables
Los componentes de ramificación y los componentes variables funcionan juntos sin problemas:
<T>
<Branch
branch={order.status}
pending={
<p>
El pedido <Var>{order.id}</Var> está pendiente.
Total: <Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
El pedido <Var>{order.id}</Var> se envió el <DateTime>{order.shippedDate}</DateTime>
</p>
}
delivered={
<p>El pedido <Var>{order.id}</Var> se entregó correctamente</p>
}
>
<p>Estado del pedido desconocido</p>
</Branch>
</T>Cuándo usar componentes con bifurcación
Sustituir operadores ternarios
Convierte la lógica condicional para usarla dentro de <T>:
// ❌ No se puede usar un operador ternario en <T>
<T>{isActive ? <p>Usuario activo</p> : <p>Usuario inactivo</p>}</T>
// ✅ Usa Branch en su lugar
<T>
<Branch
branch={isActive}
true={<p>Usuario activo</p>}
false={<p>Usuario inactivo</p>}
/>
</T>Gestiona múltiples condiciones
Reemplaza las instrucciones switch o múltiples if/else:
// ❌ Lógica condicional compleja
<T>
{status === 'loading' ? <p>Cargando…</p> :
status === 'error' ? <p>Ocurrió un error</p> :
status === 'success' ? <p>¡Correcto!</p> :
<p>Estado desconocido</p>}
</T>
// ✅ Lógica de ramificación clara
<T>
<Branch
branch={status}
loading={<p>Cargando…</p>}
error={<p>Ocurrió un error</p>}
success={<p>¡Correcto!</p>}
>
<p>Estado desconocido</p>
</Branch>
</T>Reglas de pluralización
Sustituye el manejo manual de plurales:
// ❌ Pluralización manual
<T>{count === 1 ? <p>1 artículo</p> : <p>{count} artículos</p>}</T>
// ✅ Pluralización automática
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> artículo</p>}
other={<p><Num>{count}</Num> artículos</p>}
/>
</T>Uso independiente
Los componentes de ramificación se pueden usar fuera de <T> para lógica pura sin traducción:
// Renderizado condicional puro
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// Pluralización pura
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>Problemas frecuentes
Claves de rama faltantes
Siempre proporciona contenido de respaldo predeterminado para valores que no coincidan:
// ❌ Sin contenido de respaldo predeterminado para valores inesperados
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// ¿Y si userRole es "moderator"?
/>
// ✅ Incluye siempre contenido de respaldo predeterminado
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Contenido de respaldo predeterminado para cualquier otro value */}
</Branch>Formas plurales incompletas
Proporciona las formas plurales necesarias para tu locale predeterminado:
// ❌ Falta la forma "other"
<Plural
n={count}
one={<p>1 item</p>}
// ¿Qué pasa con 0, 2, 3, etc.?
/>
// ✅ Incluye las formas requeridas
<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, recomendamos mantener la lógica de ramificación sencilla y evitar anidaciones profundas:
// ❌ Ramificación anidada compleja
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difícil de leer y de mantener */}
</Branch>
</Branch>
// ✅ Simplifica la lógica o usa varios componentes
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>Obtén más información sobre las reglas de pluralización en la documentación de Unicode CLDR.
Próximos pasos
- Guía de traducción de cadenas - Traduce texto plano sin JSX
- Guía de contenido dinámico - Gestiona la traducción en tiempo de ejecución
- Referencia de API:
¿Qué te parece esta guía?