Vue d’ensemble

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 value au paramètre branch, qui est mise en correspondance avec une value 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 possibles. Par exemple, des branches comme active et inactive peuvent être ajoutées en tant que paramètres.

Retourne

JSX.Element contenant 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 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>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 transmise à branch.

import { Branch } from 'gt-react';

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>
  );
}

Traduction de <Branch>

Pour traduire le contenu, enveloppez-le simplement dans 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>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> 
      </Branch>
    </T> 
  );
}

Ajout de variables

Pour afficher des valeurs dynamiques dans la branche, veillez à les entourer des 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 prise en charge : <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é permet d’adapter facilement <Branch> à un large éventail de cas d’usage.
• Combinez <Branch> avec d’autres composants, comme <T> pour les traductions et les variable components pour le contenu dynamique, afin de créer des interfaces riches et localisées.

Prochaines étapes

• Pour un usage plus avancé et des exemples, consultez Using Branching Components.