ReactValider les propriétés

Télécharger la vidéo

Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

Dans ce chapitre nous allons voir comment valider les types à l'aide de prop-types. Lorsque votre application grandit, et le nombre de composants augmente, des erreurs peuvent se glisser dans vos props.

function Add1Component ({n}) {
    return <div>J'ai ajouté 1 au nombre: {n + 1}</div>
}

<Add1Component n="1"> // Affichera 11 au lieu de 2 car la propriété devrait être un nombre

Flow ou Typescript

La première stratégie pour rendre votre code plus sûr est d'utiliser des outils comme Flow ou TypeScript qui permettent de spécifier les types de vos variables et des paramètres des fonctions. Ces outils permettent une analyse statique du code afin de détecter les incohérences de types sans avoir à éxécuter le code.

PropTypes

PropTypes offre un ensemble de validateurs qui permettent de valider les types des propriétés à l'éxécution.

function Add1Component ({n}) {
    return <div>J'ai ajouté 1 au nombre: {n + 1}</div>
}

Add1Component.propTypes = {
  n: PropTypes.number.isRequired
};

Cette validation permet de renvoyer des erreurs lorsque le composant reçoit des propriétés qui ne correspondent pas à la signature définie.