Présentation

Le composant <Branch> 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 mise en correspondance avec une valeur de sortie selon les clés que vous fournissez.

Référence

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 comme paramètres.

Renvoie

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

Lève

Error si la prop branch n’est pas fournie ou est invalide.

Exemples

Utilisation de base

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

Dans cet exemple, la valeur user.hairColor est utilisée pour déterminer le rendu. 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 blonds.</p>}
    />
  );
}

Contenu de secours

Les children seront toujours utilisés comme contenu de secours si aucune prop ne correspond à la valeur transmise à branch.

import { Branch } from 'gt-next';

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 blonds.</p>}
    >
      <p>La couleur de ses cheveux est inconnue.</p> // [!code highlight]
    </Branch>
  );
}

Traduction de <Branch>

Pour traduire le contenu, il suffit de l’envelopper 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 bruns.</p>}
        brown={<p>Leurs cheveux sont châtains.</p>}
        blonde={<p>Leurs cheveux sont blonds.</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 encapsuler dans les 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>Leurs cheveux sont bruns.</p>}
        brown={<p>Leurs cheveux sont châtains.</p>}
        blonde={<p>Leurs cheveux sont blonds.</p>}
      >
        <p>Couleur de cheveux non prise en charge : <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Remarques

• Les clés des 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.
• Combinez <Branch> avec 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 usages plus avancés et des exemples, voir Utilisation des composants à embranchements.