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, garantizando que todas las variaciones de contenido puedan traducirse correctamente.
Componentes disponibles
<Branch>: Contenido condicional según valores o estados<Plural>: Pluralización automática según las reglas específicas del locale
Inicio rápido
Los componentes ramificados funcionan dentro de <T> para manejar la lógica condicional:
import { T, Branch, Plural, Num, Var } from 'gt-next';
function NotificationPanel({ user, messageCount }) {
return (
<T>
<Branch
branch={user.status}
online={<p><Var>{user.name}</Var> está en línea</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 automáticamente las reglas de locale para la pluralización
// ❌ 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 ramificació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 valores o estados:
// User status display
<T>
<Branch
branch={user.role}
admin={<p>Panel de administrador</p>}
user={<p>Panel de usuario</p>}
guest={<p>Acceso de invitado</p>}
>
<p>Nivel de acceso desconocido</p>
</Branch>
</T>
// Boolean conditions
<T>
<Branch
branch={isLoggedIn}
true={<p>¡Bienvenido de nuevo!</p>}
false={<p>Por favor, inicia sesión</p>}
/>
</T>
// Subscription tiers
<T>
<Branch
branch={subscription.tier}
free={<p>Actualiza para desbloquear funciones premium</p>}
premium={<p>Disfruta de tu experiencia premium</p>}
enterprise={<p>Contacta con soporte para soluciones empresariales</p>}
>
<p>Estado de 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 de Variable
Los componentes de ramificación y los componentes de Variable funcionan a la perfección juntos:
<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> fue enviado el <DateTime>{order.shippedDate}</DateTime>
</p>
}
delivered={
<p>El pedido <Var>{order.id}</Var> fue entregado exitosamente</p>
}
>
<p>Estado del pedido desconocido</p>
</Branch>
</T>Cuándo usar componentes ramificados
Reemplazar 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>Gestionar múltiples condiciones
Sustituye las instrucciones switch o múltiples condiciones if/else:
// ❌ Lógica condicional compleja
<T>
{status === 'loading' ? <p>Cargando...</p> :
status === 'error' ? <p>Ocurrió un error</p> :
status === 'success' ? <p>¡Éxito!</p> :
<p>Estado desconocido</p>}
</T>
// ✅ Lógica de ramificación limpia
<T>
<Branch
branch={status}
loading={<p>Cargando...</p>}
error={<p>Ocurrió un error</p>}
success={<p>¡Éxito!</p>}
>
<p>Estado desconocido</p>
</Branch>
</T>Reglas de pluralización
Reemplaza el manejo manual de plurales:
// ❌ 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> elemento</p>}
other={<p><Num>{count}</Num> elementos</p>}
/>
</T>Uso independiente
Los componentes de ramificación pueden usarse 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 habituales
Claves de rama ausentes
Proporciona siempre contenido de respaldo predeterminado para valores que no coincidan:
// ❌ Sin contenido de respaldo predeterminado para valores inesperados
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// ¿Qué pasa si userRole es "moderator"?
/>
// ✅ Siempre incluye un contenido de respaldo predeterminado
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Contenido de respaldo predeterminado para cualquier otro valor */}
</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 simple la lógica de ramificación y evitar anidar en exceso:
// ❌ Ramificación anidada compleja
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difícil de leer y mantener */}
</Branch>
</Branch>
// ✅ Simplifica la lógica o usa múltiples 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?