Componentes condicionales
Cómo usar componentes condicionales para contenido condicionado dentro de las traducciones
Los componentes condicionales permiten renderizar contenido de forma condicional dentro de los componentes <T>. Manejan lógica dinámica como sentencias if/else y reglas de pluralización, y garantizan que todas las variantes 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 gestionar 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á conectado</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 variaciones de contenido posibles
- Seguir las reglas de la locale para la pluralización de forma automática
// ❌ 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:
// 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 de 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 premium</p>}
premium={<p>Disfruta tu experiencia premium</p>}
enterprise={<p>Contacta soporte para soluciones empresariales</p>}
>
<p>Estado de suscripción no disponible</p>
</Branch>
</T><Plural> - Pluralización inteligente
Usa <Plural> para el 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 de 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 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 Variable
Los componentes de ramificación y Variable funcionan a la perfección:
<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
Sustituir operadores ternarios
Transforma la lógica condicional para usarla dentro de <T>:
// ❌ No se puede usar 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 sentencias 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>¡É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
Sustituye el manejo manual de plurales:
// ❌ Pluralización manual
<T>{count === 1 ? <p>1 elemento</p> : <p>{count} elementos</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 comunes
Claves de rama ausentes
Proporciona siempre contenido de respaldo predeterminado para los valores que no coincidan:
// ❌ Sin fallback para valores inesperados
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// ¿Qué pasa si userRole es "moderator"?
/>
// ✅ Siempre incluir fallback
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* Fallback 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 elemento</p>}
// ¿Qué pasa con 0, 2, 3, etc.?
/>
// ✅ Incluir las formas requeridas
<Plural
n={count}
zero={<p>Sin elementos</p>}
one={<p>1 elemento</p>}
other={<p>{count} elementos</p>}
/>Lógica anidada compleja
Aunque esto funciona, recomendamos mantener sencilla la lógica de ramificación y evitar anidamientos profundos:
// ❌ Ramificación anidada compleja
<Branch branch={status}>
<Branch branch={subStatus}>
{/* Difícil de leer y mantener */}
</Branch>
</Branch>
// ✅ Simplificar la lógica o usar 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 - Traducir texto plano sin JSX
- Guía de contenido dinámico - Gestionar traducciones en tiempo de ejecución
- Referencia de API:
¿Qué te ha parecido esta guía?