Maîtriser les accessoires et les types d'accessoires dans React

Les accessoires et les PropTypes vous confondent-ils ? Tu n'es pas seul. Je vais vous guider à travers tout ce qui concerne les accessoires et les PropTypes. Ils peuvent vous faciliter considérablement la vie lors du développement d'applications React. Ce didacticiel vous présentera les détails sur les accessoires, la transmission et l'accès aux accessoires, et la transmission d'informations à tout composant utilisant des accessoires.

La construction d'applications React implique de décomposer l'interface utilisateur en plusieurs composants, ce qui implique que nous devrons transmettre des données d'un composant à un autre. Les accessoires sont un mécanisme important pour transmettre des informations entre les composants React, et nous allons les examiner en détail. Cet article serait incomplet sans examiner les PropTypes, car ils garantissent que les composants utilisent le bon type de données et transmettent les bonnes données.

C'est toujours une bonne pratique de valider les données que nous obtenons en tant qu'accessoires en utilisant PropTypes. Vous apprendrez également à intégrer PropTypes dans React, à taper avec PropTypes et à utiliser defaultProps. À la fin de ce didacticiel, vous comprendrez comment utiliser efficacement les props et les PropTypes. Il est important que vous ayez déjà une connaissance de base du fonctionnement de React.

Comprendre les accessoires

React nous permet de transmettre des informations aux composants à l'aide d'éléments appelés accessoires (abréviation de propriétés). Parce que React comprend plusieurs composants, les accessoires permettent de partager les mêmes données entre les composants qui en ont besoin. Il utilise un flux de données unidirectionnel (composants parent-enfant). Cependant, avec une fonction de rappel, il est possible de passer des accessoires d'un enfant à un composant parent.

Ces données peuvent se présenter sous différentes formes : nombres, chaînes, tableaux, fonctions, objets, etc. Nous pouvons passer des accessoires à n'importe quel composant, tout comme nous pouvons déclarer des attributs dans n'importe quelle balise HTML. Jetez un oeil au code ci-dessous:

 <PostList posts={postsList} />

Dans cet extrait, nous passons un accessoire nommé posts à un composant nommé PostList . Ce prop a une valeur de {postsList} . Voyons comment accéder et transmettre des données.

Passer et accéder aux accessoires

Pour rendre ce didacticiel intéressant, créons une application qui affiche une liste de noms et de messages d'utilisateurs. La démo de l'application est présentée ci-dessous :

L'application comprend des collections de composants : un composant App , un composant PostList et un composant Post .

La liste des messages nécessitera des données telles que le content et le name de l'utilisateur. Nous pouvons construire les données comme suit :

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

Après cela, nous avons besoin du composant App pour extraire les données. Voici la structure de base de ce composant :

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

Ici, nous passons un tableau de publications comme accessoire à la PostList (que nous créerons dans un instant). Le composant parent, PostList , accédera aux données de postsList , qui seront transmises en tant qu'accessoires de posts au composant enfant ( Post ). Si vous vous en souvenez, notre application comprend trois composants, que nous créerons au fur et à mesure.

Créons la PostList :

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

Le composant PostList recevra posts comme accessoire. Il parcourra ensuite le prop posts , this.props.posts , pour renvoyer chaque élément publié en tant que composant Post (que nous modéliserons plus tard). Notez également l'utilisation de la key dans l'extrait ci-dessus. Pour ceux qui découvrent React, une clé est un identifiant unique attribué à chaque élément de notre liste, nous permettant de distinguer les éléments. Dans ce cas, la clé est l' id de chaque message. Il n'y a aucune chance que deux éléments aient le même id , c'est donc une bonne donnée à utiliser à cette fin.

Pendant ce temps, les propriétés restantes sont transmises en tant qu'accessoires au composant Post ( <Post {...post} /> ).

Alors, créons le composant Post et utilisons les accessoires qu'il contient :

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

Nous construisons le composant Post comme un composant fonctionnel, plutôt que de le définir comme un composant de classe comme nous l'avons fait pour le composant PostList . Je l'ai fait pour vous montrer comment accéder aux accessoires dans un composant fonctionnel, par rapport à la façon dont nous y accédons dans un composant de classe avec this.props . Comme il s'agit d'un composant fonctionnel, nous pouvons accéder aux valeurs à l'aide de props .

Nous avons maintenant appris comment passer et accéder aux props, et aussi comment passer des informations d'un composant à l'autre. Voyons maintenant comment les props fonctionnent avec les fonctions.

Passer des fonctions via des accessoires

Dans la section précédente, nous avons passé un tableau de données en tant qu'accessoires d'un composant à un autre. Mais que se passe-t-il si nous travaillons plutôt avec des fonctions ? React nous permet de passer des fonctions entre composants. Cela est pratique lorsque nous voulons déclencher un changement d'état dans un composant parent à partir de son composant enfant. Les accessoires sont supposés être immuables ; vous ne devriez pas essayer de changer la valeur d'un accessoire. Vous devez le faire dans le composant qui le transmet, qui est le composant parent.

Créons une application de démonstration simple qui écoute un événement de clic et modifie l'état de l'application. Pour changer l'état de l'application dans un composant différent, nous devons transmettre notre fonction au composant dont l'état doit changer. De cette façon, nous aurons une fonction dans notre composant enfant capable de changer d'état.

Cela semble un peu complexe ? J'ai créé une application React simple qui change d'état en un clic et affiche une information de bienvenue :

Dans la démo ci-dessus, nous avons deux composants. L'un est le composant App , qui est le composant parent qui contient l'état de l'application et la fonction pour définir l'état. Le ChildComponent sera l'enfant dans ce scénario, et sa tâche est de restituer les informations de bienvenue lorsque l'état change.

Décomposons cela en code :

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

Notez que nous avons défini notre état sur true et que la méthode pour modifier l'état est créée dans le composant App . Dans la fonction render() , nous transmettons l'état de l'application, comme le prop isShow , au composant ChildComponent . Nous passons également la fonction toggleShow() en tant qu'accessoire nommé clickMe .

Nous allons l'utiliser dans le ChildComponent qui ressemble à ceci :

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

La chose la plus importante ci-dessus est que le composant App transmet une fonction en tant que prop au ChildComponent . La fonction clickMe() est utilisée pour le gestionnaire de clic dans le ChildComponent , alors que le ChildComponent ne connaît pas la logique de la fonction — il ne déclenche la fonction que lorsque le bouton est cliqué. L'état est modifié lorsque la fonction est appelée, et une fois que l'état a changé, l'état est à nouveau transmis comme accessoire. Tous les composants concernés, comme l'enfant dans notre cas, seront rendus à nouveau.

Nous devons transmettre l'état de l'application, isShow , en tant qu'accessoire au ChildComponent , car sans lui, nous ne pouvons pas écrire la logique ci-dessus pour afficher le message d' greeting lorsque l'état est mis à jour.

Maintenant que nous avons examiné les fonctions, passons à la validation. C'est toujours une bonne pratique de valider les données que nous obtenons via les props en utilisant PropTypes. Plongeons-y maintenant.

Que sont les PropTypes dans React ?

Les PropTypes sont un mécanisme permettant de s'assurer que les composants utilisent le bon type de données et transmettent les bonnes données, que les composants utilisent le bon type d'accessoires et que les composants récepteurs reçoivent le bon type d'accessoires.

Nous pouvons le considérer comme un chiot livré à une animalerie. L'animalerie ne veut pas de cochons, de lions, de grenouilles ou de geckos - elle veut des chiots. Les PropTypes garantissent que le type de données correct (chiot) est livré à l'animalerie, et non à un autre type d'animal.

Dans la section ci-dessus, nous avons vu comment transmettre des informations à n'importe quel composant à l'aide d'accessoires. Nous avons transmis les accessoires directement en tant qu'attribut au composant, et nous avons également transmis des accessoires de l'extérieur du composant et les avons utilisés dans ce composant. Mais nous n'avons pas vérifié quel type de valeurs nous obtenons dans notre composant via les accessoires ou que tout fonctionne toujours.

Il nous appartient totalement de valider les données que nous obtenons dans un composant via des accessoires. Mais dans une application complexe, il est toujours recommandé de valider ces données.

Utilisation de PropTypes

Pour utiliser PropTypes, nous devons ajouter le package en tant que dépendance à notre application via npm ou Yarn, en exécutant le code suivant dans la ligne de commande. Pour npm :

 npm install --save prop-types

Et pour le fil :

 yarn add prop-types

Pour utiliser les PropTypes, nous devons d'abord importer les PropTypes depuis le package prop-types :

 import PropTypes from 'prop-types';

Utilisons ProTypes dans notre application qui répertorie les messages des utilisateurs. Voici comment nous allons l'utiliser pour le composant Post :

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

Ici, PropTypes.string et PropTypes.number sont des validateurs d'accessoires qui peuvent être utilisés pour s'assurer que les accessoires reçus sont du bon type. Dans le code ci-dessus, nous déclarons que id est un nombre, tandis que content et user doivent être des chaînes.

De plus, les PropTypes sont utiles pour détecter les bogues. Et nous pouvons appliquer le passage des props en utilisant isRequired :

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

Les PropTypes ont beaucoup de validateurs. Voici quelques-uns des plus courants :

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

D'autres types sont disponibles, que vous pouvez vérifier dans la documentation de React].

Accessoires par défaut

Si nous voulons transmettre des informations par défaut à nos composants à l'aide d'accessoires, React nous permet de le faire avec quelque chose appelé defaultProps . Dans les cas où les PropTypes sont facultatifs (c'est-à-dire qu'ils n'utilisent pas isRequired ), nous pouvons définir defaultProps . Les props par défaut garantissent que les props ont une valeur, au cas où rien ne serait passé. Voici un exemple:

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

Ici, defaultProps sera utilisé pour s'assurer que this.props.name a une valeur, au cas où elle n'est pas spécifiée par le composant parent. Si aucun nom n'est passé à la classe Profile , elle aura alors la propriété par défaut Stranger sur laquelle se rabattre. Cela évite toute erreur lorsqu'aucune prop n'est passée. Je vous conseille de toujours utiliser defaultProps pour chaque PropType optionnel.

Conclusion

J'espère que vous avez apprécié ce tutoriel. J'espère que cela vous a montré à quel point les accessoires et les propTypes sont importants pour créer des applications React, car sans eux, nous ne serions pas en mesure de transmettre des données entre les composants lorsque des interactions se produisent. Ils font partie intégrante de l'architecture pilotée par les composants et de gestion de l'état autour de laquelle React est conçu.

Les PropTypes sont un bonus pour s'assurer que les composants utilisent le bon type de données et transmettent les bonnes données, et que les composants utilisent le bon type d'accessoires, et que les composants récepteurs reçoivent le bon type d'accessoires.

Si vous avez des questions, vous pouvez les laisser dans la section des commentaires ci-dessous, et je serai heureux de répondre à chacune et de résoudre tous les problèmes avec vous.

Les références

• "Penser en réagissant", React Docs
• "Liste et clés", React Docs
• « Vérification de type avec PropTypes », React Docs
• "Comment transmettre des accessoires aux composants dans React", Robin Wieruch