Réagir les types de prop

Comment utiliser PropTypes pour définir le type requis d'un accessoire

Puisque JavaScript est un langage typé dynamiquement, nous n'avons pas vraiment de moyen d'appliquer le type d'une variable au moment de la compilation, et si nous transmettons des types non valides, ils échoueront à l'exécution ou donneront des résultats étranges si les types sont compatibles mais pas ce que nous attendons.

Flow etManuscritaide beaucoup, mais React a un moyen d'aider directement avec les types d'accessoires, et même avant d'exécuter le code, nos outils (éditeurs, linters) peuvent détecter quand nous passons les mauvaises valeurs:

import PropTypes from 'prop-types'
import React from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
BlogPostExcerpt.propTypes = {
title: PropTypes.string,
description: PropTypes.string
}
export default BlogPostExcerpt

Quels types pouvons-nous utiliser

Voici les types fondamentaux que nous pouvons accepter:

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol

Nous pouvons accepter l'un des deux types:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Nous pouvons accepter l'une des nombreuses valeurs:

PropTypes.oneOf(['Test1', 'Test2']),

Nous pouvons accepter une instance d'une classe:

PropTypes.instanceOf(Something)

Nous pouvons accepter n'importe quel nœud React:

PropTypes.node

ou même n'importe quel type du tout:

PropTypes.any

Les tableaux ont une syntaxe spéciale que nous pouvons utiliser pour accepter un tableau d'un type particulier:

PropTypes.arrayOf(PropTypes.string)

Objets, nous pouvons composer les propriétés d'un objet en utilisant

PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

Exiger des propriétés

AjoutisRequiredà n'importe quelle option PropTypes entraînera React à renvoyer une erreur si cette propriété est manquante:

PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,

Téléchargez mon gratuitManuel React

Réagir les types de prop

Comment utiliser PropTypes pour définir le type requis d'un accessoire

Quels types pouvons-nous utiliser

Exiger des propriétés

Plus de tutoriels de réaction: