Rendu conditionnel

Vos composants devront souvent afficher des choses différentes selon différentes conditions. Dans React, vous pouvez rendre du JSX de manière conditionnelle en utilisant la syntaxe JavaScript comme les instructionsif, l'opérateur&&et l'opérateur? :.

Renvoyer du JSX de manière conditionnelle

Imaginons que vous ayez un composantPackingListqui affiche plusieursItems, qui peuvent être marqués comme emballés ou non :

Notez que certains composantsItemont leur propisPackeddéfinie àtrueau lieu defalse. Vous souhaitez ajouter une coche (✅) aux articles emballés siisPacked={true}.

Vous pouvez écrire cela sous la forme d'uneinstruction if/elsecomme ceci :

Si la propisPackedesttrue, ce coderenvoie un arbre JSX différent.Avec ce changement, certains articles obtiennent une coche à la fin :

Essayez de modifier ce qui est renvoyé dans chaque cas et observez comment le résultat change !

Notez comment vous créez une logique de branchement avec les instructions JavaScriptifetreturn. Dans React, le flux de contrôle (comme les conditions) est géré par JavaScript.

Ne rien renvoyer de manière conditionnelle avecnull

Dans certaines situations, vous ne voudrez rien afficher du tout. Par exemple, disons que vous ne voulez pas du tout montrer les articles emballés. Un composant doit renvoyer quelque chose. Dans ce cas, vous pouvez renvoyernull:

SiisPackedest vrai, le composant ne renverra rien, c'est-à-direnull. Sinon, il renverra du JSX à afficher.

En pratique, renvoyernulldepuis un composant n'est pas courant car cela pourrait surprendre un développeur qui tente de l'afficher. Plus souvent, vous incluriez ou excluriez conditionnellement le composant dans le JSX du composant parent. Voici comment faire !

Inclure du JSX de manière conditionnelle

Dans l'exemple précédent, vous contrôliez quel arbre JSX (le cas échéant !) serait renvoyé par le composant. Vous avez peut-être déjà remarqué une certaine duplication dans le rendu :

est très similaire à

Les deux branches conditionnelles renvoient<li className="item">...</li>:

Bien que cette duplication ne soit pas nuisible, elle pourrait rendre votre code plus difficile à maintenir. Et si vous souhaitez modifier leclassName? Vous devriez le faire à deux endroits dans votre code ! Dans une telle situation, vous pourriez inclure conditionnellement un peu de JSX pour rendre votre code plusDRY.

Opérateur conditionnel (ternaire) (? :)

JavaScript possède une syntaxe compacte pour écrire une expression conditionnelle — l'opérateur conditionnelou « opérateur ternaire ».

Au lieu de ceci :

Vous pouvez écrire ceci :

Vous pouvez le lire comme« siisPackedest vrai, alors (?) affichername + ' ✅', sinon (:) affichername».

Supposons maintenant que vous souhaitiez envelopper le texte de l'élément terminé dans une autre balise HTML, comme<del>pour le barrer. Vous pouvez ajouter encore plus de sauts de ligne et de parenthèses pour faciliter l'imbrication de plus de JSX dans chacun des cas :

Ce style fonctionne bien pour des conditions simples, mais utilisez-le avec modération. Si vos composants deviennent désordonnés avec trop de balisage conditionnel imbriqué, envisagez d'extraire des composants enfants pour nettoyer. Dans React, le balisage fait partie de votre code, vous pouvez donc utiliser des outils comme des variables et des fonctions pour simplifier les expressions complexes.

Opérateur logique ET (&&)

Un autre raccourci courant que vous rencontrerez est l'opérateur logique ET (&&) de JavaScript.Dans les composants React, il apparaît souvent lorsque vous souhaitez afficher du JSX lorsque la condition est vraie,ou ne rien afficher sinon.Avec&&, vous pourriez afficher conditionnellement la coche uniquement siisPackedesttrue:

Vous pouvez lire cela comme« siisPacked, alors (&&) afficher la coche, sinon, ne rien afficher ».

Voici cela en action :

Uneexpression JavaScript &&renvoie la valeur de son côté droit (dans notre cas, la coche) si le côté gauche (notre condition) esttrue. Mais si la condition estfalse, l'expression entière devientfalse. React considèrefalsecomme un « trou » dans l'arbre JSX, tout commenullouundefined, et n'affiche rien à sa place.

Affectation conditionnelle de JSX à une variable

Lorsque les raccourcis entravent l'écriture de code simple, essayez d'utiliser une instructionifet une variable. Vous pouvez réaffecter des variables définies aveclet, commencez donc par fournir le contenu par défaut que vous souhaitez afficher, le nom :

Utilisez une instructionifpour réassigner une expression JSX àitemContentsiisPackedesttrue:

Les accolades ouvrent une « fenêtre sur le monde JavaScript ».Intégrez la variable avec des accolades dans l’arbre JSX retourné, en imbriquant l’expression précédemment calculée à l’intérieur du JSX :

Ce style est le plus verbeux, mais aussi le plus flexible. Le voici en action :

Comme précédemment, cela fonctionne non seulement pour du texte, mais aussi pour n’importe quel JSX :

Si vous n’êtes pas familier avec JavaScript, cette variété de styles peut sembler écrasante au premier abord. Cependant, les apprendre vous aidera à lire et écrire n’importe quel code JavaScript — et pas seulement les composants React ! Choisissez celui que vous préférez pour commencer, puis consultez à nouveau cette référence si vous oubliez comment fonctionnent les autres.

Récapitulatif

• Dans React, vous contrôlez la logique conditionnelle avec JavaScript.
• Vous pouvez retourner une expression JSX conditionnellement avec une instructionif.
• Vous pouvez conditionnellement sauvegarder du JSX dans une variable, puis l’inclure dans d’autres JSX en utilisant les accolades.
• En JSX,{cond ? <A /> : <B />}signifie« sicond, affiche<A />, sinon<B />».
• En JSX,{cond && <A />}signifie« sicond, affiche<A />, sinon rien ».
• Ces raccourcis sont courants, mais vous n’êtes pas obligé de les utiliser si vous préférez un simpleif.