Tutoriel React, partie 11: Formation de balisage dynamique et méthode du tableau de cartes

Dans la partie d'aujourd'hui de la traduction du cours de formation React, nous parlerons de l'utilisation de la méthode de tableau standard map () pour organiser la formation dynamique du balisage JSX décrivant des ensembles d'éléments du même type.



→ 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 21. Génération de balisage dynamique et méthode des tableaux de cartes

→ Original

Nous continuerons le travail à partir du moment où nous nous serons arrêtés pour achever la tâche pratique précédente. Rappelez-vous App.js le code du fichier App.js ressemblait à ceci:

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." />                     <Joke               question="What's the best thing about Switzerland?"               punchLine="I don't know, but the flag is a big plus!"           />                     <Joke               question="Did you hear about the mathematician who's afraid of negative numbers?"               punchLine="He'll stop at nothing to avoid them!"           />                     <Joke               question="Hear about the new restaurant called Karma?"               punchLine="There's no menu: You get what you deserve."           />                     <Joke               question="Did you hear about the actor who fell through the floorboards?"               punchLine="He was just going through a stage."           />                     <Joke               question="Did you hear about the claustrophobic astronaut?"               punchLine="He just needed a little space."           />                 </div>   ) } export default App 

Le composant App affiche un ensemble de composants Joke . Voici à quoi ressemble la page d'application à ce stade du travail.


Page d'application

Les propriétés question et punchLine sont transmises à certains de ces composants, et uniquement punchLine à punchLine . Les valeurs de ces propriétés sont désormais définies dans le code d'instanciation du composant Joke en texte brut. En réalité, la majeure partie des données affichées sur les pages des applications React pénètre dans l'application à la suite de requêtes HTTP adressées à certaines API. Ces API sont prises en charge au moyen de serveurs qui récupèrent les informations des bases de données, les mettent en forme sous forme de code JSON et envoient ce code aux parties clientes des applications. Nous n'avons pas encore atteint un tel niveau pour répondre aux demandes d'API. Par conséquent, en tant que source de données, nous allons utiliser un fichier contenant des données qui pourraient être obtenues en analysant la réponse JSON du serveur. À savoir, ce sera un fichier jokesData.js avec le contenu suivant:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   },   {       id: 3,       question: "Did you hear about the mathematician who's afraid of negative numbers?",       punchLine: "He'll stop at nothing to avoid them!"   },   {       id: 4,       question: "Hear about the new restaurant called Karma?",       punchLine: "There's no menu: You get what you deserve."   },   {       id: 5,       question: "Did you hear about the actor who fell through the floorboards?",       punchLine: "He was just going through a stage."   },   {       id: 6,       question: "Did you hear about the claustrophobic astronaut?",       punchLine: "He just needed a little space."   } ] export default jokesData 

Ce fichier sera situé dans le répertoire src de notre projet.


Nouveau fichier dans le dossier src

En fait, il contient un tableau d'objets. Un tableau similaire peut être obtenu en analysant les données JSON reçues d'une certaine API. Nous exportons à partir de ce fichier un tableau de jokesData . Si nécessaire, nous pouvons importer ce fichier dans le composant dans lequel il est nécessaire et imaginer que nous travaillons non pas avec les données extraites du fichier, mais avec ce qui nous a renvoyé une API.

Maintenant que nous avons un tableau de données source, réfléchissons à la façon de transformer ces données en un ensemble d'instances de composants React.

De nombreux développeurs disent que grâce à la maîtrise de React, ils en ont appris plus sur JavaScript. La raison en est que des actions similaires à celle dont nous allons parler dans d'autres cadres comme Angular et Vue sont effectuées à l'aide de certains outils spéciaux. Et dans React, cela se fait en utilisant du JavaScript standard.

En particulier, nous prévoyons d'utiliser certaines méthodes standard de tableaux, qui sont des fonctions d'ordre supérieur. Ces méthodes peuvent, comme arguments, accepter les fonctions décrites par les programmeurs. Ce sont ces fonctions qui déterminent ce qu'un appel à l'une ou l'autre méthode standard fera avec les éléments du tableau.

Supposons que nous ayons un tableau numérique:

 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 

Nous pouvons traiter ce tableau à l'aide de la méthode de tableau standard map() , en lui passant une certaine fonction qui définit l'ordre de conversion des éléments de ce tableau. Dans notre cas, cette fonction transmettra, un à la fois, les numéros de ce tableau. Une fonction peut faire n'importe quoi avec eux, après quoi ce qu'elle retourne ira à un nouveau tableau, à un élément dont l'index correspond à l'index de l'élément en cours de traitement. Si nous devons former un nouveau tableau, dont les éléments sont des éléments du tableau d'origine, multipliés par 2, alors cela ressemblera à ceci:

 const doubled = nums.map(function(num) {   return num * 2 }) 

Vérifiez le fonctionnement de ce code:

 console.log(doubled) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 

Si vous n'avez jamais rencontré de méthodes de tableau auparavant - telles que map() , filter() , reduce() et autres - il est recommandé de les gérer.

Ici, nous allons utiliser la méthode map() pour générer automatiquement une liste d'instances de composants.

Revenons à notre exemple. Importez le fichier App.js dans le fichier App.js C'est fait comme ceci:

 import jokesData from "./jokesData" 

Après cela, dans le code du programme, nous pouvons travailler avec le tableau jokesData . À savoir, nous allons utiliser la méthode map() . Voici à quoi ressemblera le «blanc» de cette méthode.

 jokesData.map(joke => { }) 

Notez que nous transmettons ici la fonction flèche à la méthode map() . Dans notre cas, cela nous permet de rendre le code plus compact. Puisque la fonction ne prend qu'un seul paramètre ( joke ), nous, lorsqu'elle est déclarée, pouvons nous passer de parenthèses.

De la fonction passée à la méthode map() , nous voulons renvoyer une nouvelle instance du composant Joke , à laquelle les propriétés question et punchLine de l'élément du tableau jokesData reçu sont jokesData . Voici à quoi cela pourrait ressembler:

 jokesData.map(joke => {   return (   <Joke question={joke.question} punchLine={joke.punchLine} />   ) }) 

Ce code peut être raccourci si deux faits sont pris en compte. Tout d'abord, return ne renvoie qu'un seul élément, vous pouvez donc placer cet élément immédiatement après le return , éliminant ainsi le besoin de parenthèses. Deuxièmement, la fonction flèche ne contient que l'opération de retour d'une certaine valeur, par conséquent, lors de la déclaration d'une telle fonction, vous pouvez vous passer du mot clé return et sans accolades. De plus, nous rappelons qu'à la suite de la méthode map() , un nouveau tableau est formé. Ce tableau doit être enregistré quelque part. Toutes ces considérations nous conduisent à ce qui suit:

 const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) 

La constante jokeComponents désormais un tableau, dont chaque élément est une description d'une instance du composant Joke avec les propriétés question et punchLine sont transmises.

Que faisons-nous maintenant avec cette gamme de composants? React le rend très pratique pour travailler avec de tels tableaux. À savoir, nous parlons du fait qu'un tel tableau peut être utilisé dans le code JSX. Voici à quoi ressemblera maintenant le code du fichier d' App :

 import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() {   const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)       return (       <div>           {jokeComponents}       </div>   ) } export default App 

Après cela, la page d'application aura la même apparence qu'auparavant, cependant, vous verrez l'avertissement suivant dans la console du navigateur:

 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https://fb.me/react-warning-keys for more information.   in Joke (at App.js:7)   in App (at src/index.js:6) 

Sa signification se résume au fait que les éléments du tableau doivent avoir une propriété de key unique. Nous n'entrerons pas dans les détails concernant les raisons pour lesquelles React attend la propriété de key unique key composants en double. Il nous suffit de prendre en compte le fait que, lors de la création en bloc d'instances de composant, comme celle que nous venons d'effectuer à l'aide de la méthode map() , les instances doivent passer la propriété key . De plus, une telle propriété peut être transmise à l'instance de composant elle-même et, par exemple, à la <div> , dans laquelle le code du composant est inclus. Cela ne joue pas un rôle spécial.

Ainsi, la propriété key doit être affectée d'une valeur unique. En règle générale, dans les objets de données reçus de l'API, il existe des identificateurs (propriétés comme id ). L'essentiel pour nous est leur caractère unique. Par exemple, nous pourrions définir la propriété key sur joke.question - tous les textes de ces propriétés sont uniques dans notre application. Mais nous ferons autrement. Rappelez-vous à quoi jokesData.js les objets contenant des données du tableau que nous avons exporté à partir du fichier jokesData.js . En voici un fragment:

 const jokesData = [   {       id: 1,       punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally."   },   {       id: 2,       question: "What's the best thing about Switzerland?",       punchLine: "I don't know, but the flag is a big plus!"   }, ... ] 

Chaque objet a une propriété id , dont nous maintenons l'unicité de manière indépendante. Ce sont les valeurs de ces propriétés qui peuvent être utilisées comme valeurs pour la propriété key .

Maintenant, le code pour créer un tableau d'instances de composants dans App.js prendra la forme suivante:

 const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />) 

Si vous apportez cette modification dans le code, regardez la page d'application dans le navigateur et vérifiez le contenu de la console, il s'avère que la notification concernant la propriété de key a disparu.

Après toutes les transformations que nous avons soumises au projet, l'apparence de la page d'application n'a pas changé. Cependant, le code du composant App est devenu beaucoup plus court et plus clair, et les données pour former la liste des composants proviennent désormais de quelque chose qui ressemble fortement à une source de données externe. C'est de cette façon que fonctionnent les applications réelles.

En outre, il convient de noter que le cœur de la modification de code ci-dessus était l'utilisation de la méthode de tableau standard map() . Nous avons utilisé la technique de création d'une liste d'instances du composant Joke dans le composant App , mais rien ne nous empêche, si nécessaire, d'utiliser la même approche dans le composant Joke , qui peut, en fonction des données qui lui sont transférées, créer notre propre liste d'instances d'un certain composant.

En même temps, comme nous l'avons déjà dit, parmi les méthodes standard de tableaux, vous pouvez trouver d'autres outils intéressants. Par exemple, la méthode sort() peut être utilisée pour trier les éléments d'un tableau par un attribut. La méthode filter() peut être utilisée pour sélectionner uniquement les éléments du tableau qui répondent à certains critères. Tout cela s'applique au travail avec des tableaux contenant des instances de composants.

Si vous le souhaitez, vous pouvez expérimenter ces méthodes. Imaginons essayer d'utiliser la méthode filter() et supprimer de la sortie générée par le composant App les instances du composant Joke dont la propriété question ne dépasse pas la longueur spécifiée. Ou assurez-vous que seuls les composants pour lesquels la propriété question et la propriété punchLine sont punchLine .

Résumé

Aujourd'hui, nous avons parlé de l'utilisation de la méthode de tableau standard map() pour compiler des listes de composants, et avons également discuté des possibilités que d'autres méthodes de tableau standard nous offrent. La prochaine fois, vous aurez une leçon pratique sur le matériel étudié aujourd'hui.

Chers lecteurs! Comment résoudriez-vous le problème de l'affichage par le composant App uniquement des instances du composant Joke dont la propriété question dépasse la longueur spécifiée?