Tutoriel React Partie 21: Deuxième leçon et atelier de rendu conditionnel

Aujourd'hui, dans la traduction de la prochaine partie du cours de formation React, nous portons à votre attention la deuxième leçon sur le rendu conditionnel et un atelier sur ce sujet.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 37. Rendu conditionnel, partie 2

→ Original

Dans le didacticiel d'aujourd'hui sur le rendu conditionnel, nous parlerons de l'utilisation de l'opérateur logique && (Et). Nous expérimenterons un projet standard créé par create- App.js -app, dans le fichier App.js dont se trouve le code suivant:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           unreadMessages: [               "Call your mom!",               "New spam email available. All links are definitely safe to click."           ]       }   }   render() {       return (           <div>              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           </div>       )   } } export default App 

Maintenant, l'application regarde dans le navigateur comme indiqué ci-dessous.


Page d'application dans le navigateur

Vous avez peut-être déjà utilisé l'opérateur && dans des constructions comme true && false (qui donne false ). Pour que l'expression true soit renvoyée à la suite du calcul d'une telle expression, elle doit ressembler à true && true . Lors du traitement de telles expressions, JavaScript détermine si leur côté gauche est vrai et, dans l'affirmative, renvoie simplement ce qui se trouve dans leur côté droit. Si une expression de la forme false && false traitée, alors false sera immédiatement retourné, sans vérifier le côté droit de l'expression. Par conséquent, l'opérateur && peut être utilisé dans le rendu conditionnel. Avec lui, vous pouvez soit renvoyer quelque chose qui sera affiché à l'écran, soit ne rien retourner.

Analysons le code de l'application de formation.

L'état du composant App stocke un tableau de chaînes unreadMessages . Chaque ligne de ce tableau représente un message non lu. La page affiche le nombre de messages non lus, déterminé en fonction de la longueur du tableau. Si ce tableau est vide, c'est-à-dire qu'il n'y aura pas un seul élément, alors l'application affichera ce qui est montré ci-dessous sur la page.


L'application nous informe qu'il n'y a pas de messages non lus

Pour obtenir cet effet, il suffit d'amener le tableau sous cette forme: unreadMessages: [] .

S'il n'y a pas de messages non lus, il est tout à fait possible de ne pas afficher de message du tout. Si nous utilisons l'opérateur ternaire dont nous avons parlé la dernière fois pour implémenter ce comportement de l'application, la méthode render() du composant App peut être réécrite comme suit:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 ?              <h2>You have {this.state.unreadMessages.length} unread messages!</h2> :               null           }       </div>   ) } 

Maintenant, si le tableau unreadMessages vide, rien ne sera affiché sur la page. Mais le code présenté ici peut être simplifié en utilisant l'opérateur && . Voici à quoi cela ressemblerait:

 render() {   return (       <div>           {               this.state.unreadMessages.length > 0 &&              <h2>You have {this.state.unreadMessages.length} unread messages!</h2>           }       </div>   ) } 

S'il y a quelque chose dans le tableau, le côté droit de l'expression s'affiche sur la page. Si le tableau est vide, rien ne s'affiche sur la page.

Cela ne veut pas dire que l'utilisation de l'opérateur && dans le rendu conditionnel est absolument nécessaire, car le même effet peut être obtenu en utilisant un opérateur ternaire qui renvoie null si la condition qu'il teste est fausse. Mais l'approche présentée ici simplifie le code et, en outre, il est utilisé assez souvent, vous pouvez donc le rencontrer lors de la lecture des programmes d'autres personnes.

Leçon 38. Atelier. Rendu conditionnel

→ Original

▍Emploi

Voici le code du composant fonctionnel App , qui est stocké dans le fichier App.js d'un projet standard créé à l'aide de create-react-app.

 import React from "react" function App() {   return (       <div>           Code goes here       </div>   ) } export default App 

Vous devez effectuer les opérations suivantes:

1. Convertissez le code du composant pour lui donner un état.
2. Assurez-vous que l'état du composant stocke des informations indiquant si l'utilisateur s'est «connecté» ou non (dans cet exercice, «se connecter» et «se déconnecter» du système signifie uniquement changer la valeur correspondante stockée dans l'état).
3. Ajoutez à la page que le composant forme un bouton qui permet à l'utilisateur de se connecter et de se déconnecter.
   
   
   1. Il s'agit d'une tâche supplémentaire. Assurez-vous que si l'utilisateur n'est pas connecté, le bouton affichera LOG IN , et s'il est connecté, LOG OUT .
      
4. Sur la page formée par le composant, Logged in si l'utilisateur est connecté et Logged out s'il n'est pas Logged out .
   

Si maintenant vous sentez qu’il est difficile pour vous de commencer à résoudre ces problèmes, jetez un œil aux conseils et mettez-vous au travail.

▍Conseils

Pour terminer cette tâche, vous devez rappeler une grande partie de ce dont nous avons parlé dans les classes précédentes. Pour commencer, un composant qui peut avoir un état doit être un composant basé sur une classe. Ce composant doit avoir un constructeur. Dans l'état du composant, vous pouvez stocker une propriété logique, par exemple, elle peut être appelée isLoggedIn , dont la valeur, true ou false , indique si l'utilisateur est connecté ou non. Pour que le bouton qui doit être ajouté à la page générée par l'application puisse exécuter ses fonctions, il aura besoin d'un onClick événements onClick . Afin d'afficher différents textes, en fonction de la valeur changeante de l'état, il sera nécessaire de recourir à la technologie de rendu conditionnel.

▍Solution

Nous transformons le composant fonctionnel disponible dans le code en composant basé sur une classe. Nous en avons besoin pour plusieurs raisons. Tout d'abord, nous devons travailler avec l'état de l'application. Deuxièmement, nous avons besoin d'un gestionnaire d'événements qui est appelé lorsqu'un bouton est cliqué. En principe, vous pouvez écrire une fonction indépendante et l'utiliser pour gérer les événements de bouton, mais je préfère décrire les gestionnaires au sein des classes de composants.

Voici à quoi ressemblera le code d'un composant fonctionnel converti en composant basé sur une classe. Ici, dans le constructeur du composant, nous décrivons son état initial, qui contient la propriété isLoggedIn définie sur false .

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }   }   render() {          return (           <div>               Code goes here           </div>       )   } } export default App 

Le code ci-dessus est une solution aux première et deuxième parties de la tâche. Nous allons maintenant travailler sur l'ajout d'un bouton à la page affichée par le composant. Jusqu'à présent, ce bouton affichera la même inscription indépendamment de ce qui est stocké dans l'état de l'application. Nous allons l'équiper d'un gestionnaire d'événement, en y plaçant, pour vérifier l'opérabilité de notre code, une simple commande pour sortir un message vers la console. De plus, nous, dans le constructeur du composant, lierons ce gestionnaire à this , this qui nous sera utile lorsque nous, dans le code de ce gestionnaire, accèderons aux mécanismes conçus pour travailler avec l'état du composant. Maintenant, le code ressemble à ci-dessous.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       console.log("I'm working!")   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Lorsque vous cliquez sur le bouton LOG IN , I'm working! .

Rappelons maintenant que nous devons, quand un bouton est isLoggedIn , la propriété isLoggedIn stockée dans l'état isLoggedIn de true à false et vice versa. Pour ce faire, dans le gestionnaire de clic de bouton, vous devrez appeler la fonction this.setState() , qui peut être utilisée de deux manières. À savoir, il peut être fourni, sous la forme d'un objet, une nouvelle idée de ce qui devrait être contenu dans l'état. La deuxième variante de son utilisation prévoit le transfert d'une fonction qui reprend l'état précédent du composant et en forme un nouveau, renvoyant, à nouveau, l'objet. C'est ce que nous ferons. C'est ce que nous avons obtenu à ce stade du travail.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {          return (           <div>               <button onClick={this.handleClick}>LOG IN</button>           </div>       )   } } export default App 

Ici, nous pourrions utiliser la construction if-else, mais nous convertissons simplement true en false et false en true utilisant l'opérateur logique ! (PAS).

Jusqu'à présent, nous n'avons aucun mécanisme qui, basé sur ce qui est stocké dans l'état, nous permettrait d'influencer l'apparence de l'application. Par conséquent, nous allons maintenant résoudre la tâche supplémentaire de la tâche numéro 3. A savoir, nous allons faire changer l'étiquette sur le bouton en fonction de l'état du composant. Pour ce faire, vous pouvez déclarer une variable dans la méthode render() dont la valeur, LOG IN ou LOG OUT , dépend de ce qui est stocké dans l'état. Cette valeur peut ensuite être utilisée comme texte de bouton. Voici à quoi ça ressemble.

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>           </div>       )   } } export default App 

Prenons maintenant la quatrième partie du devoir. Nous afficherons du texte sur la page selon que l'utilisateur est connecté ou non. En fait, compte tenu de tout ce qui est déjà présent dans le code du composant, la résolution de ce problème est très simple. Voici le code terminé pour le fichier App.js

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: false       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               isLoggedIn: !prevState.isLoggedIn           }       })   }     render() {         let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN"       let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out"       return (           <div>               <button onClick={this.handleClick}>{buttonText}</button>               <h1>{displayText}</h1>           </div>       )   } } export default App 

Voici à quoi ressemble l'application dans le navigateur.


Page d'application dans le navigateur

Un clic sur le bouton LOG IN illustré dans la figure précédente modifie l'état de l'application, après quoi LOG OUT s'affiche sur le bouton et un texte s'affiche sur la page informant l'utilisateur qu'il est connecté.

Résumé

Aujourd'hui, nous avons continué à parler de rendu conditionnel, examiné l'utilisation de l'opérateur && et terminé une tâche pratique impliquant de nombreux mécanismes que nous avons étudiés. La prochaine fois, vous continuerez à travailler sur l'application Todo et sur un nouveau sujet.

Chers lecteurs! Avez-vous fait face à la tâche pratique d'aujourd'hui?