Composants de Ramification

Aperçu

Les composants de branchement dans gt-next permettent le rendu dynamique de contenu basé sur des conditions spécifiques. Ces composants incluent :

<Branch> : Rend le contenu en fonction d'une prop branch correspondante.
<Plural> : Rend le contenu en fonction des règles de pluralisation pour un nombre donné.

Les deux composants fournissent des outils puissants pour gérer la logique conditionnelle et le contenu dynamique dans les applications localisées.

Dans cette référence, nous couvrirons :

Ce que sont les composants de branchement et comment ils fonctionnent.
Les modèles de conception pour utiliser efficacement les composants de branchement.
Quelques exemples d'utilisation de chaque composant de branchement.
Les pièges courants à éviter lors de l'utilisation des composants de branchement.

Qu'est-ce que les composants de branchement ?

Les composants de branchement choisissent dynamiquement quel contenu afficher en fonction d'une condition ou d'une valeur spécifique.

Le composant <Branch> vous permet d'afficher différents contenus en fonction d'une valeur branch fournie. Si aucune branche correspondante n'est trouvée, le contenu de repli children est affiché.

Par exemple, le composant <Branch> est parfait pour le rendu conditionnel basé sur l'état de l'application, les préférences de l'utilisateur ou toute donnée dynamique.

Composant `<Plural>`

Le composant <Plural> étend la fonctionnalité de <Branch> en gérant automatiquement la pluralisation et l'accord des nombres. Il utilise la valeur n fournie pour déterminer quelle forme plurielle afficher, en fonction des règles spécifiques à la langue.

Par exemple, le composant <Plural> est idéal pour afficher dynamiquement du texte singulier et pluriel, comme "1 article" contre "2 articles."

Modèles de Conception

Logique de Bifurcation avec `<Branch>`

Le composant <Branch> est utilisé pour un changement de contenu flexible basé sur une valeur branch. Vous pouvez définir plusieurs branches possibles, et le composant rendra le contenu correspondant à la clé de branche correspondante.

import { T, Branch } from 'gt-next';
 
export default function UserStatus({ status }) {
  return (
    <T id="UserStatus">
      <Branch
        branch={status}
        active={<p>L'utilisateur est actif.</p>}
        inactive={<p>L'utilisateur est inactif.</p>}
      >
        <p>Statut inconnu.</p>
      </Branch>
    </T>
  );
}

Pluralisation avec `<Plural>`

Le composant <Plural> automatise la logique de pluralisation en fonction de la valeur de n. Le composant choisit dynamiquement la forme plurielle appropriée pour le nombre et la locale donnés.

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <T id="item_count">
      <Plural
        n={count}
        one={<>Vous avez <Num>1</Num> article.</>}
        other={<>Vous avez <Num>{count}</Num> articles.</>}
      />
    </T>
  );
}

Les formes plurielles disponibles dépendent de la locale et suivent les règles de pluralisation Unicode CLDR.

Exemples

Exemple de `<Branch>`

Le composant <Branch> rend dynamiquement le contenu en fonction de la prop branch fournie. Dans cet exemple, il affiche différentes descriptions en fonction du plan d'abonnement de l'utilisateur.

import { Branch } from 'gt-next';
 
export default function SubscriptionDetails({ plan }) {
  return (
    <Branch
      branch={plan}
      free={<p>Vous êtes sur le plan Gratuit. Passez à un niveau supérieur pour débloquer plus de fonctionnalités !</p>}
      premium={<p>Vous profitez du plan Premium avec un accès complet aux fonctionnalités.</p>}
      enterprise={<p>Vous êtes sur le plan Entreprise. Contactez le support pour des solutions sur mesure.</p>}
    >
      <p>Aucun plan d'abonnement détecté.</p>
    </Branch>
  );
}

La prop branch détermine quel message de plan afficher.
Si le plan est "free", "premium", ou "enterprise", le message correspondant est affiché.
Si le plan ne correspond à aucune de ces valeurs, le contenu de secours ("Aucun plan d'abonnement détecté.") est affiché.

Exemple de `<Plural>`

Le composant <Plural> gère dynamiquement le contenu singulier et pluriel en fonction de la valeur de n. Cet exemple affiche le nombre de messages non lus dans la boîte de réception d'un utilisateur.

import { T, Plural, Num } from 'gt-next';
 
export default function UnreadMessages({ unreadCount }) {
  return (
    <T id="unread_messages">
      <Plural
        n={unreadCount}
        one={<>Vous avez <Num>{unreadCount}</Num> message non lu.</>}
        other={<>Vous avez <Num>{unreadCount}</Num> messages non lus.</>}
      />
    </T>
  );
}

La prop n spécifie le nombre de messages non lus.
Si unreadCount est 1, il rend : "Vous avez 1 message non lu."
Pour toute autre valeur, il rend : "Vous avez X messages non lus." où X est la valeur de unreadCount formatée par <Num>.

Pièges Courants

Valeurs de Branche Manquantes

Si une valeur de branche n'est pas fournie ou ne correspond à aucune clé, le composant <Branch> rendra le contenu des enfants de secours. Assurez-vous toujours que les clés de branche possibles correspondent aux valeurs passées à la prop branch.

import { Branch } from 'gt-next';
 
export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>L'utilisateur est actif.</p>}
      inactive={<p>L'utilisateur est inactif.</p>}
    >
      <p>Statut inconnu.</p>
    </Branch>
  );
}

Si status est undefined ou une valeur autre que active ou inactive, le contenu de secours “Statut inconnu.” sera affiché.

Formes Plurielles Manquantes

N'oubliez pas de spécifier toutes les formes plurielles nécessaires dans votre langue de secours. C'est ainsi que gt-next garantit que votre application dispose toujours de contenu de secours à afficher.

Notes

Les composants de branchement sont essentiels pour gérer le contenu dynamique et localisé dans les applications.
Le composant <Branch> est très flexible et peut s'adapter à diverses conditions et états.
Le composant <Plural> simplifie la pluralisation en respectant automatiquement les règles spécifiques à la langue.
Incluez toujours une prop children de secours pour une meilleure gestion des erreurs et une meilleure expérience utilisateur.

Prochaines étapes

Consultez <Branch> et <Plural> dans la Référence API pour plus de détails.
Apprenez-en davantage sur les règles de pluralisation et la logique de branchement dans Règles de Pluralisation Unicode CLDR.
Explorez Composants Variables dans notre guide de référence.