Les props 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 simplifier 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, ainsi que la transmission d'informations à tout composant utilisant des accessoires.

La création d'applications React implique la décomposition de l'interface utilisateur en plusieurs composants, ce qui implique que nous devrons transmettre des données depuis 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 type de données correct et transmettent les bonnes données.

C'est toujours une bonne pratique de valider les données que nous obtenons comme accessoires en utilisant PropTypes. Vous apprendrez également à intégrer PropTypes dans React, à vérifier le type 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à des connaissances de base sur le fonctionnement de React .

Comprendre les accessoires

React nous permet de transmettre des informations aux composants en utilisant des choses appelées accessoires (abréviation de propriétés). Étant donné 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 renvoyer des accessoires d'un enfant à un composant parent.

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

Dans cet extrait, nous transmettons un accessoire nommé posts à un composant nommé PostList . Cet accessoire a une valeur de {postsList} . Décrivons comment accéder aux données et les transmettre.

Passer et accéder aux accessoires

Pour rendre ce didacticiel intéressant, créons une application qui affiche une liste des noms et des publications des 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 de poste .

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

 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 = () => {
  revenir (
    

      
    
  );
};

Ici, nous transmettons un tableau de messages comme accessoire à la PostList (que nous allons créer dans un instant). Le composant parent, PostList accédera aux données de postsList qui seront passées comme posts props au composant enfant ( Post ). Si vous vous souvenez bien, notre application comprend trois composants, que nous créerons au fur et à mesure.

Créons la PostList :

 la classe PostList étend React.Component {
  render () {
    revenir (
      
        
 Derniers messages des utilisateurs 
        

           {this.props.posts.map ((post) => {
            revenir (
              

                
              
            );
          })}
        
      
    );
  }
}

Le composant PostList recevra messages comme accessoire. Il passera ensuite en boucle à travers le posts prop, this.props.posts pour renvoyer chaque article posté comme un composant Post (que nous modéliserons plus tard). Notez également l'utilisation de la clé dans l'extrait ci-dessus. Pour ceux qui découvrent React, une clé est un identifiant unique attribué à chaque élément de notre liste, ce qui nous permet de distinguer les éléments. Dans ce cas, la clé est l'identifiant 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 comme accessoires au Post ] ( ).

Créons donc le composant Post et utilisons les accessoires qu'il contient:

 const Post = (props) => {
  revenir (
    

      
 {props.content} 
      
 nom d'utilisateur: {props.user} 
    
  );
};

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 . J'ai fait cela 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 en utilisant props .

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

Passage de fonctions via des accessoires

Dans la section précédente, nous avons passé un tableau de données comme accessoires d'un composant à un autre. Mais que faire si nous travaillons avec des fonctions à la place? React nous permet de passer des fonctions entre les 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 censés être immuables; vous ne devez 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 qui est 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 permettant de 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 extend React.Component {
  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      isShow: vrai,
    };
  }
  toggleShow = () => {
    this.setState ((state) => ({isShow:! state.isShow}));
  };
  render () {
    revenir (
      

        
      
    );
  }
}

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 passons l'état de l'application, comme le prop isShow au composant ChildComponent . Nous passons également la fonction toggleShow () comme accessoire nommé clickMe .

Nous utiliserons ceci dans le ChildComponent qui ressemble à ceci:

 La classe ChildComponent étend React.Component {
  clickMe = () => {
    this.props.clickMe ();
  };
  render () {
    const salutation = "Bienvenue dans React Props";
    revenir (
      

        {this.props.isShow? (
          
 {salutation} 
        ) : nul}
        
          
 cliquez sur Moi 
        
      
    );
  }
}

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

Nous devons passer l'état de l'application, isShow comme accessoire du ChildComponent car sans elle, nous ne pouvons pas écrire la logique ci-dessus pour afficher salutation lorsque l'état est mis à jour.

Maintenant que nous avons regardé les fonctions, passons à la validation. C'est toujours une bonne pratique de valider les données que nous obtenons via les accessoires à l'aide des PropTypes. Plongeons-y maintenant.

Que sont les PropTypes dans React?

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

Nous pouvons le considérer comme un chiot livré dans une animalerie. L'animalerie ne veut pas de porcs, 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 utilisant des accessoires. Nous avons transmis des accessoires directement en tant qu'attribut au composant, et nous avons également passé des accessoires de l'extérieur du composant et les avons utilisés dans ce composant. Mais nous n’avons pas vérifié le type de valeurs que nous obtenons dans notre composant via des 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 PropTypes, nous devons d'abord importer des PropTypes depuis le paquet 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,
  contenu: PropTypes.string,
  utilisateur: 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 attraper des bugs. Et nous pouvons imposer des accessoires de passage en utilisant isRequired :

 Post.proptypes = {
  id: PropTypes.number.isRequired,
  contenu: PropTypes.string.isRequired,
  utilisateur: PropTypes.string.isRequired
}

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

 Component.proptypes = {
  stringProp: PropTypes.string, // Le prop doit être une chaîne
  numberProp: PropTypes.number, // Le prop doit être un nombre
  anyProp: PropTypes.any, // Le prop peut être de n'importe quel type de données
  booleanProp: PropTypes.bool, // Le prop doit être une fonction
  functionProp: PropTypes.func // Le prop doit être une fonction
  arrayProp: PropTypes.array // Le prop doit être un tableau
}

D'autres types sont disponibles, que vous pouvez archiver Documentation de React ].

Default Props

Si nous voulons transmettre des informations par défaut à nos composants à l'aide d'accessoires, React nous permet de le faire donc 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 accessoires par défaut garantissent que les accessoires ont une valeur, au cas où rien ne serait passé. Voici un exemple:

 Le profil de classe étend React.Component {

  // Spécifie les valeurs par défaut des accessoires
  static defaultProps = {
    nom: 'Stranger'
  };

  // Rend "Welcome, Stranger":
  render () {
    return 
 Bienvenue, {this.props.name} 

  }
}

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

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 types d'accessoires sont importants pour la création d'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 de gestion des états et des composants sur laquelle React est conçu.

Les PropTypes sont un bonus pour garantir que les composants utilisent le type de données correct 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 commentaires ci-dessous, et je serai heureux de répondre à chacun et de résoudre tous les problèmes avec vous .

Références

(ks, ra, al, il)