Comment afficher et masquer des éléments dans React

Sans les instructions if dans JSX, comment contrôlez-vous le flux de votre application? Voyons comment rendre ou ne pas rendre les éléments dans React.

Vous ne pouvez pas incorporer les instructions if dans JSX. Alors, comment contrôlez-vous ce qui est affiché? Le contrôle du flux dans votre application est fondamental pour la programmation, et ce n'est pas différent dans React. Dans cet article, nous allons répondre à la question: comment afficher ou masquer quelque chose dans React?

J'ai commencé à réfléchir aux différentes façons d'afficher et de masquer les choses dans React, et il s'avère qu'il existe plus de façons que vous pourrait penser! Nous allons couvrir certains des avantages et des inconvénients de chaque approche, et comment vous pouvez tester la présence d'un élément avec React Testing Library.

Le code source complet peut être trouvé ici .

Returning Null

Dans React moderne, un composant n'est guère plus qu'une fonction dont le travail consiste à renvoyer la valeur à restituer. Tout comme les fonctions normales, les composants fonctionnels peuvent avoir plusieurs valeurs de retour. Si ce que le composant rend est une situation "tout ou rien", la façon la plus simple de contrôler si un élément est rendu est d'éviter de renvoyer tout JSX, et renvoie null à la place.

Parce que si n'est pas incorporée à l'intérieur de JSX mais fait simplement partie de la partie JavaScript régulière de la fonction, vous êtes libre d'utiliser toute sorte de construction JS que vous aimez. Dans cet exemple, si le produit n'est pas disponible, nous allons simplement retourner null .

 const AddToCart = ({available}) => {
  if (! available) return null;

  revenir (
    

       Ajouter au panier 
    
  );
};

Affichage ternaire

Lorsque vous devez contrôler si un élément par rapport à un autre est affiché, ou même un élément par rapport à rien ( null ), vous pouvez utiliser l'opérateur ternaire intégré à l'intérieur d'une plus grande partie de JSX.

Dans ce cas, s'il ne reste aucun produit, nous afficherons "Epuisé"; sinon, nous afficherons le nombre de produits restants.

 

  
 {description} 

  {restant === 0? (
     Épuisé 
  ): (
     {restant} restant 
  )}

Affichage des raccourcis

Si vous souhaitez afficher uniquement quelque chose si une valeur est vrai et il n'y a rien à afficher si le résultat est faux il existe un raccourci plutôt que ayant nul du côté falsey d'un opérateur ternaire. Cela implique l'utilisation d'un intérieur conditionnel de votre JSX qui ressemble à checkIfTrue && si vrai . Parce que si les instructions qui utilisent les opérandes && s'arrêtent dès qu'elles trouvent la première valeur évaluée à faux, elle n'atteindra pas le côté droit (JSX) si le côté gauche de l'équation est évalué à faux.

Voyons cela en action! Nous afficherons uniquement le reste du nom du produit s'il a quelque chose à afficher:

 

   {nameFirst} 
  {nameRest.length> 0 && (
     {nameRest.join ("")} 
  )}

Je dois souligner que cela provoque des problèmes dans React Native, où il ne sait pas gérer false pendant la sortie, et finit par provoquer une erreur. Dans React Native, vous devez utiliser un opérateur ternaire avec null renvoyé du côté faux:

 

   {nameFirst} 
  {nameRest.length> 0? (
     {nameRest.join ("")} 
  ) : nul}

Utilisation de la propriété Style

Jusqu'à ce point, nous avons choisi entre le rendu d'un élément ou non. Et si nous voulions rendre un élément sans le voir? À ce stade, nous avons quelques options sur lesquelles nous concentrer – la première étant de modifier directement la propriété de style de l'élément HTML en définissant des attributs CSS tels que afficher et l'opacité . Dans ce court exemple ci-dessous, nous allons définir la propriété display comme étant block ou none en fonction de la valeur contenue dans showInfo . Encore une fois, un opérateur ternaire est utilisé dans JSX intégré pour contrôler le flux de notre application.

 
 info 

Modification des classes CSS

Sur le même thème que la modification des attributs style nous pouvons modifier la classe d'un élément, ce qui nous permet de contrôler l'affichage d'un élément l'opacité ou même de le cacher sur le côté de l'écran comme on pourrait le faire avec un hamburger

Dans l'exemple ci-dessous, l'élément nav est sur le côté gauche de l'écran avec à gauche: -200px mais lorsque la classe open est ajouté à l'élément nav il passe à à gauche: 0px et soudain, il est à nouveau visible.

 nav {
  position: fixe;
  gauche: -200px;
  largeur: 200 px;
  rembourrage: 1rem;
  transition: 0,3 s toute facilité;
  indice z: 1000;
  hauteur: 100vh;
  fond: # cfd8dc;
}

nav.open {
  gauche: 0px;
}

Nous pouvons basculer cette classe CSS en utilisant l'état qui est basculé dans le onClick d'un bouton (le hamburger), en choisissant d'ajouter ou non une classe avec une condition ternaire className = {open? "open": null} .

 const Nav = () => {
  const [open, setOpen] = React.useState (faux);

  revenir (
    
  );
};

Animation de visibilité avec react-spring

Plutôt que de manipuler nous-mêmes les classes et les attributs de style, nous pouvons chercher une bibliothèque tierce pour le faire pour nous. Dans ce cas, nous utilisons react-spring qui peut basculer n'importe quel attribut CSS numérique en utilisant des propriétés basées sur la physique telles que la masse la tension et friction . Si ceux-ci ne sont pas complètement évidents pour vous (comme c'est certainement mon cas!), Il existe un visualiseur de ressort réactif disponible pour vous aider à obtenir les bons réglages.

 import {useSpring, animated} de "react-spring";

const SpringIn = ({children}) => {
  const props = useSpring ({
    opacité: 1,
    de: {opacity: 0},
    config: {masse: 10, tension: 10, frottement: 10}
  });
  retour  {enfants} ;
};

Avec notre composant personnalisé SpringIn en enveloppant simplement

nous pouvons faire fondre cet élément en utilisant react-spring .

Existence avec React Testing Library

Les tests devraient être une partie importante de votre processus de développement React, et en utilisant React Testing Library nous pouvons tester la présence ou l'absence de présence d'un élément en cours de rendu.

Le premier exemple utilise getByText pour trouver l'élément, et nous nous attendons à ce qu'il toBeInTheDocument tandis que le deuxième exemple utilise queryByText pour le vérifier toBeNull . Nous sommes passés de getByText à queryByText car getByText générera une erreur s'il ne trouve pas l'élément que vous recherchez, mais dans le deuxième exemple, c'est exactement ce que nous attendons!

 importez React à partir de "react";
import {render, fireEvent} de "@ testing-library / react";
importer {AddToCart, Nav} depuis "./App";

test ("rend le bouton du panier lorsqu'il est disponible", () => {
  const {getByText} = render ();

  attendez (getByText (/ cart / i)). toBeInTheDocument ();
});

test ("masque le bouton du panier lorsqu'il n'est pas disponible", () => {
  const {queryByText} = render ();

  attend (queryByText (/ cart / i)). toBeNull ();
});

Test des classes avec React Testing Library

Nous pouvons également utiliser React Testing Library pour vérifier si un élément a une certaine classe CSS ou non. Dans l'exemple ci-dessous, notre nav est à l'origine masqué, ce qui signifie qu'il n'a pas la classe ouverte mais après avoir basculé l'état en cliquant sur le menu hamburger, nous pouvons vérifier que il a correctement la classe ouverte .

 test ("ajoute la classe à nav lorsqu'il est basculé", () => {
  const {getByTestId} = render (

Conclusion

Dans cet article, nous avons couvert six façons différentes de montrer ou de ne pas montrer un élément dans React. Parfois, nous avons choisi de ne pas le rendre du tout, en utilisant différents types d'instructions conditionnelles, mais nous avons également examiné comment faire en sorte que l'élément soit rendu, mais pour pas le rendre visible à l'utilisateur, en jouant avec attributs de style et classes CSS. Enfin, nous avons utilisé React Testing Library pour vérifier qu'un certain élément était correctement rendu, ou pas rendu.