Tutoriel React Partie 10: Atelier sur l'utilisation des propriétés et du style des composants

Aujourd'hui, dans la dixième partie de la traduction de la formation React, nous vous proposons de réaliser une tâche pratique sur l'utilisation des propriétés des composants et leur mise en forme.



→ 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 20. Atelier. Propriétés des composants, style

→ Original

▍Emploi

1. Créez un nouveau projet d'application React.
2. Affichez le composant App sur la page de l'application, dont le code doit être dans un fichier séparé.
3. Le composant App doit générer 5 composants Joke contenant des blagues. Faites ressortir ces composants comme vous le souhaitez.
4. Chaque composant Joke doit accepter et traiter la propriété question , pour la partie principale de la blague, et la propriété punchLine , pour sa phrase clé.

▍Tâche supplémentaire

Certaines blagues consistent entièrement en une phrase clé. Par exemple: "Il est difficile d'expliquer les jeux de mots aux kleptomanes parce qu'ils prennent toujours les choses au pied de la lettre." Considérez comment le composant Joke peut uniquement afficher la propriété punchLine qui lui est punchLine , si la propriété question n'est pas définie. Expérimentez avec le style de vos composants.

▍Solution

Tâche principale

Le fichier index.js sera assez familier:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render(<App />,   document.getElementById("root")) 

Voici le code du fichier App.js :

 import React from "react" import Joke from "./Joke" function App() {   return (       <div>           <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 

Veuillez noter que puisque le fichier du composant Joke se trouve dans le même dossier que le fichier du composant App , nous l'importons avec la commande d' import Joke from "./Joke" . Nous renvoyons plusieurs éléments de l' App , nous devons donc envelopper toutes les sorties dans une certaine balise, par exemple, dans la <div> . Aux instances de composant, nous transmettons les punchLine question et punchLine .

Voici le code du fichier Joke.js :

 import React from "react" function Joke(props) {   return (       <div>           <h3>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Ici, lors de la déclaration de la fonction Joke , nous spécifions le paramètre props . Rappelons que c'est un tel nom qui est utilisé selon la tradition établie. En fait, cela peut être n'importe quoi, mais il vaut mieux l'appeler des props .

Nous renvoyons plusieurs éléments du composant - ils sont donc inclus dans la <div> . En utilisant les props.punchLine props.question et props.punchLine nous props.punchLine aux propriétés transmises à l'instance de composant lors de sa création. Ces propriétés deviennent des propriétés de l'objet props . Ils sont placés entre accolades car le code JavaScript utilisé dans le balisage JSX doit être placé entre accolades. Sinon, le système prendra les noms de variables en texte brut. Après une paire d'éléments <h3> , dans l'un desquels le texte principal de la blague est affiché, et dans l'autre - sa phrase clé, il y a l'élément <hr/> qui décrit la ligne horizontale. Ces lignes seront affichées après chaque blague, les séparant.

Voici à quoi ressemble le projet d'application dans VSCode.


Application dans VSCode

Voici la page d'application.


Page d'application dans le navigateur

Tâche supplémentaire

Rappelons que l'objectif principal de la tâche supplémentaire est d'organiser la conclusion correcte des blagues, qui consistent entièrement en une phrase clé. Cela s'exprime par le fait que lors de la création d'une instance du composant Joke , seule la propriété punchLine est punchLine et la propriété question n'est pas transmise. La création d'une instance d'un tel composant ressemble à ceci:

 <Joke   punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> 

Si vous placez ce code en haut du code renvoyé par le composant App , la page d'application ressemblera à ceci.


Page d'application mal formée

De toute évidence, le problème ici est que, bien que la propriété question ne soit pas transmise au composant, elle affiche du texte qui précède la partie principale de chaque blague, après quoi rien n'est sorti.

Pour l'avenir, nous notons que dans les prochaines parties du cours, nous parlerons du rendu conditionnel. En utilisant cette approche du rendu, vous pouvez résoudre efficacement des problèmes comme le nôtre. En attendant, nous essaierons d'utiliser les moyens de styliser les pages. A savoir, nous allons faire en sorte que si la propriété question n'est pas passée au composant, le fragment correspondant du balisage JSX retourné par lui ne sera pas affiché sur la page. Voici le code complet du composant Joke , qui implémente l'une des approches possibles pour résoudre notre problème en utilisant CSS:

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: props.question ? "block" : "none"}}>Question: {props.question}</h3>           <h3>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Nous attribuons au premier élément <h3> style, qui est déterminé lors de l'instanciation du composant en fonction de la présence de la propriété props.question dans l'objet. Si cette propriété est dans l'objet, l'élément prend le style d' display: block et s'affiche sur la page; sinon, display: none et n'est pas affiché sur la page. L'utilisation d'une telle construction conduira au même effet:

 <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3> 

Ici, le style d' display: none style n'est affecté à l'élément si l'objet props pas la propriété question , sinon rien n'est affecté à la propriété display .

Maintenant, la page d'application dans le navigateur ressemblera à celle illustrée ci-dessous.


Gestion appropriée des composants d'une situation dans laquelle la propriété de question ne lui est pas transmise

Vous pouvez remarquer que tous les éléments formés par le composant Joke ressemblent. Voyons comment sélectionner ceux qui ne transmettent que la propriété punchLine . Nous allons résoudre ce problème en utilisant les styles intégrés et l'approche que nous avons examinée ci-dessus. Voici le code mis à jour pour le composant Joke :

 import React from "react" function Joke(props) {   return (       <div>           <h3 style={{display: !props.question && "none"}}>Question: {props.question}</h3>           <h3 style={{color: !props.question && "#888888"}}>Answer: {props.punchLine}</h3>           <hr/>       </div>   ) } export default Joke 

Et voici ce qui apparaît maintenant sur la page d'application.


Styliser un élément différent des autres

Maintenant que nous avons travaillé sur le composant Joke , il est devenu plus polyvalent et mieux adapté à la réutilisation.

Résumé

Dans cette leçon pratique, nous développions des compétences dans le transfert de propriétés aux composants. Si vous analysez le code dans l'exemple donné ici, vous remarquerez que pour générer plusieurs blocs de balisage similaires, vous devez constamment écrire des fragments répétitifs du code JSX. Dans la prochaine leçon, nous parlerons de la façon d'automatiser la formation de ces pages à l'aide d'outils JavaScript standard, tout en séparant le balisage et les données.

Chers lecteurs! Si votre solution aux problèmes de cet atelier est différente de celle proposée, merci de nous en faire part.