<Branch>

Aperçu

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

const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>

Vous transmettez une valeur au paramètre branch, et celle-ci est associée à une valeur de sortie en fonction des clés que vous fournissez.

Référence

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

Retourne

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

Exceptions

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

Exemples

Utilisation de base

<Branch> doit avoir une sortie différente pour chaque valeur possible de la prop branch.

Dans cet exemple, la valeur de user.hairColor est utilisée pour déterminer la sortie. 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>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (you can pass a string if you prefer)
      blonde={<p>Their hair is light.</p>}
    />
  );
}

Contenu de repli

Les children seront toujours utilisés comme solution de repli si aucune prop ne correspond à la valeur passée à branch.

import { Branch } from 'gt-react';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}

Traduire <Branch>

Si vous souhaitez traduire le contenu, il suffit de l'entourer avec 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>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p> 
      </Branch>
    </T> 
  );
}

Ajout de variables

Si vous souhaitez afficher des valeurs dynamiques dans le branch, assurez-vous de les entourer avec 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>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Notes

• Les clés pour les branches peuvent être n'importe quelle valeur de chaîne qui correspond à la prop branch. Cette flexibilité permet d'adapter facilement <Branch> à un large éventail de cas d'utilisation.
• Combinez <Branch> avec d'autres composants, tels que <T> pour les traductions et les composants de variable 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 Utilisation des composants de branchement.
• Pour en savoir plus sur les composants de variables comme <Currency>, <DateTime>, <Num>, et <Var>, consultez la documentation Utilisation des composants de variables.