Componentes de Ramas

Descripción general

Los Componentes de Ramificación en gt-next permiten la representación dinámica de contenido basado en condiciones específicas. Estos componentes incluyen:

<Branch>: Representa contenido basado en una branch prop coincidente.
<Plural>: Representa contenido basado en reglas de pluralización para un número dado.

Ambos componentes proporcionan herramientas poderosas para gestionar la lógica condicional y el contenido dinámico en aplicaciones localizadas.

En esta referencia, cubriremos:

Qué son los Componentes de Ramificación y cómo funcionan.
Patrones de diseño para usar Componentes de Ramificación de manera efectiva.
Algunos ejemplos de cómo usar cada Componente de Ramificación.
Errores comunes a evitar al trabajar con Componentes de Ramificación.

¿Qué son los Componentes de Ramificación?

Los Componentes de Ramificación eligen dinámicamente qué contenido renderizar basado en una condición o valor específico.

El componente <Branch> te permite renderizar diferentes contenidos basado en un valor de branch proporcionado. Si no se encuentra una rama coincidente, se renderiza el contenido de children de respaldo.

Por ejemplo, el componente <Branch> es perfecto para la renderización condicional basada en el estado de la aplicación, las preferencias del usuario o cualquier dato dinámico.

Componente `<Plural>`

El componente <Plural> extiende la funcionalidad de <Branch> manejando automáticamente la pluralización y la concordancia numérica. Utiliza el valor n proporcionado para determinar qué forma plural mostrar, basado en reglas específicas del idioma.

Por ejemplo, el componente <Plural> es ideal para renderizar texto singular y plural dinámicamente, como "1 artículo" vs. "2 artículos."

Patrones de Diseño

Lógica de Ramificación con `<Branch>`

El componente <Branch> se utiliza para cambiar contenido de manera flexible basado en un valor branch. Puedes definir múltiples ramas posibles, y el componente renderizará el contenido correspondiente a la clave de rama coincidente.

import { T, Branch } from 'gt-next';
 
export default function UserStatus({ status }) {
  return (
    <T id="UserStatus">
      <Branch
        branch={status}
        active={<p>El usuario está activo.</p>}
        inactive={<p>El usuario está inactivo.</p>}
      >
        <p>Estado desconocido.</p>
      </Branch>
    </T>
  );
}

Pluralización con `<Plural>`

El componente <Plural> automatiza la lógica de pluralización basada en el valor de n. El componente elige dinámicamente la forma plural apropiada para el número y el idioma dados.

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <T id="item_count">
      <Plural
        n={count}
        one={<>Tienes <Num>1</Num> artículo.</>}
        other={<>Tienes <Num>{count}</Num> artículos.</>}
      />
    </T>
  );
}

Las formas plurales disponibles dependen del idioma y siguen las reglas de pluralización de Unicode CLDR.

Ejemplos

Ejemplo de `<Branch>`

El componente <Branch> renderiza dinámicamente contenido basado en la prop de rama proporcionada. En este ejemplo, muestra diferentes descripciones basadas en el plan de suscripción del usuario.

import { Branch } from 'gt-next';
 
export default function SubscriptionDetails({ plan }) {
  return (
    <Branch
      branch={plan}
      free={<p>Estás en el plan Gratis. ¡Actualiza para desbloquear más funciones!</p>}
      premium={<p>Estás disfrutando del plan Premium con acceso completo a las funciones.</p>}
      enterprise={<p>Estás en el plan Empresarial. Contacta al soporte para soluciones personalizadas.</p>}
    >
      <p>No se detectó ningún plan de suscripción.</p>
    </Branch>
  );
}

La prop de rama determina qué mensaje de plan mostrar.
Si el plan es "free", "premium", o "enterprise", se muestra el mensaje correspondiente.
Si el plan no coincide con ninguno de estos valores, se muestra el contenido de reserva ("No se detectó ningún plan de suscripción.").

Ejemplo de `<Plural>`

El componente <Plural> maneja dinámicamente contenido singular y plural basado en el valor de n. Este ejemplo muestra el número de mensajes no leídos en la bandeja de entrada de un usuario.

import { T, Plural, Num } from 'gt-next';
 
export default function UnreadMessages({ unreadCount }) {
  return (
    <T id="unread_messages">
      <Plural
        n={unreadCount}
        one={<>Tienes <Num>{unreadCount}</Num> mensaje no leído.</>}
        other={<>Tienes <Num>{unreadCount}</Num> mensajes no leídos.</>}
      />
    </T>
  );
}

La prop n especifica el número de mensajes no leídos.
Si unreadCount es 1, se renderiza: "Tienes 1 mensaje no leído."
Para cualquier otro valor, se renderiza: "Tienes X mensajes no leídos." donde X es el valor de unreadCount formateado por <Num>.

Errores Comunes

Valores de Rama Faltantes

Si no se proporciona un valor de rama o no coincide con ninguna clave, el componente <Branch> renderizará el contenido de los hijos de respaldo. Siempre asegúrese de que las posibles claves de rama coincidan con los valores pasados a la prop de rama.

import { Branch } from 'gt-next';
 
export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>The user is active.</p>}
      inactive={<p>The user is inactive.</p>}
    >
      <p>Status unknown.</p>
    </Branch>
  );
}

Si status es undefined o un valor diferente de active o inactive, se mostrará el contenido de respaldo “Status unknown.”.

Formas Plurales Faltantes

Recuerde especificar todas las formas plurales necesarias en su idioma de respaldo. Así es como gt-next asegura que su aplicación siempre tenga contenido de respaldo para mostrar.

Notas

Los Componentes de Ramificación son esenciales para gestionar contenido dinámico y localizado en aplicaciones.
El componente <Branch> es altamente flexible y puede adaptarse a varias condiciones y estados.
El componente <Plural> simplifica la pluralización al adherirse automáticamente a las reglas específicas del idioma.
Siempre incluya una prop children de respaldo para un mejor manejo de errores y experiencia del usuario.

Próximos Pasos

Consulta <Branch> y <Plural> en la Referencia de API para más detalles.
Aprende más sobre las reglas de pluralización y la lógica de ramificación en Reglas de Pluralización de Unicode CLDR.
Explora Componentes de Variables en nuestra guía de referencia.