Formation Apprendre React 16 : Valider les propriétés

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.