Présentation

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 en fonction des clés que vous fournissez.

Références

Props

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

Renvoie

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

Exceptions

Error si la prop branch n’est pas fournie ou est 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-react';

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

Contenu de secours

Le children sera toujours utilisé comme contenu de secours si aucune prop ne correspond à la value passée à branch.

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <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>La couleur de ses cheveux est inconnue.</p> // [!code highlight]
    </Branch>
  );
}

Traduction de <Branch>

Pour traduire le contenu, entourez-le simplement d’un composant <T>.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <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>Leurs cheveux sont d’une couleur inconnue.</p>
      </Branch>
    </T> 
  );
}

Ajout de variables

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

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

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 gérée : <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Notes

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

Prochaines étapes

• Pour des cas d’usage plus avancés et des exemples, consultez Utiliser les composants ramifiés.