Aperçu

Le composant <Branch> vous permet d’ajouter une logique conditionnelle à une traduction.

const status = 'active';
<Branch branch={status}
    active={<p>L'utilisateur est actif.</p>}
    inactive={<p>L'utilisateur est inactif.</p>}
/>

Vous transmettez une valeur au paramètre branch, qui est ensuite mise en correspondance avec une valeur de sortie selon les clés que vous fournissez.

Références

Props

La syntaxe [key]: string indique des clés arbitraires représentant des branches potentielles. Par exemple, des branches comme active et inactive peuvent être ajoutées en paramètres.

Renvoie

JSX.Element qui contient le contenu de la branche spécifiée ou, à défaut, le contenu de secours.

Exceptions

Error si la prop branch est manquante ou invalide.

Exemples

Utilisation de base

<Branch> doit produire un résultat différent pour chaque valeur possible de la prop branch.

Dans cet exemple, la valeur user.hairColor est utilisée pour déterminer le résultat. Nous avons défini les props black, brown et blonde pour correspondre aux valeurs possibles de user.hairColor.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Leurs cheveux sont foncés.</p>}
      brown="Leurs cheveux sont châtains." // (vous pouvez passer une chaîne si vous préférez)
      blonde={<p>Leurs cheveux sont clairs.</p>}
    />
  );
}

Contenu de secours

Les children seront toujours utilisés comme secours si aucune prop ne correspond à la value passée à branch.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Leurs cheveux sont foncés.</p>}
      brown={<p>Leurs cheveux sont châtains.</p>}
      blonde={<p>Leurs cheveux sont clairs.</p>}
    >
      <p>Couleur de cheveux inconnue.</p> // [!code highlight]
    </Branch>
  );
}

Traduire <Branch>

Pour traduire le contenu, enveloppez-le simplement dans un composant <T>.

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Leurs cheveux sont foncés.</p>}
        brown={<p>Leurs cheveux sont châtains.</p>}
        blonde={<p>Leurs cheveux sont clairs.</p>}
      >
        <p>La couleur de leurs cheveux est inconnue.</p> 
      </Branch>
    </T> 
  );
}

Ajout de variables

Si vous souhaitez afficher des valeurs dynamiques dans la branche, veillez à les entourer des composants <Currency>, <DateTime>, <Num> ou <Var>.

import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Ses cheveux sont foncés.</p>}
        brown={<p>Ses cheveux sont châtains.</p>}
        blonde={<p>Ses cheveux sont clairs.</p>}
      >
        <p>Couleur de cheveux non prise en charge : <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Notes

• Les clés des branches peuvent être n’importe quelle chaîne correspondant à la prop branch. Cette flexibilité facilite l’adaptation de <Branch> à un large éventail de cas d’usage.
• Associez <Branch> à d’autres composants, tels que <T> pour les traductions et les composants de variables pour du contenu dynamique, afin de créer des interfaces riches et localisées.

Prochaines étapes

• Pour des utilisations plus avancées et des exemples, consultez Utiliser les composants à embranchements.