Vérification du type d'exécution pour les accessoires React et les objets similaires.
Vous pouvez utiliser des types d'accessoires pour documenter les types de propriétés prévus transmis aux composants. React (et potentiellement d'autres bibliothèques – voir la référence checkPropTypes() ci-dessous) vérifiera les accessoires transmis à vos composants par rapport à ces définitions et avertira lors du développement s'ils ne correspondent pas.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Si vous préférez exclure prop-types de votre application et l'utiliser globalement via window.PropTypes , le package prop-types fournit des distributions à fichier unique, hébergées sur les CDN suivants :
<!-- development version -->
< script src =" https://unpkg.com/[email protected]/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://unpkg.com/[email protected]/prop-types.min.js " > </ script > <!-- development version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js " > </ script > Pour charger une version spécifique de prop-types remplacez 15.6.0 par le numéro de version.
PropTypes a été initialement exposé dans le cadre du module principal de React et est couramment utilisé avec les composants React. Voici un exemple d'utilisation de PropTypes avec un composant React, qui documente également les différents validateurs fournis :
import React from 'react' ;
import PropTypes from 'prop-types' ;
class MyComponent extends React . Component {
render ( ) {
// ... do things with the props
}
}
MyComponent . propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray : PropTypes . array ,
optionalBigInt : PropTypes . bigint ,
optionalBool : PropTypes . bool ,
optionalFunc : PropTypes . func ,
optionalNumber : PropTypes . number ,
optionalObject : PropTypes . object ,
optionalString : PropTypes . string ,
optionalSymbol : PropTypes . symbol ,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
// see https://reactjs.org/docs/rendering-elements.html for more info
optionalNode : PropTypes . node ,
// A React element (ie. <MyComponent />).
optionalElement : PropTypes . element ,
// A React element type (eg. MyComponent).
// a function, string, or "element-like" object (eg. React.Fragment, Suspense, etc.)
// see https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js
optionalElementType : PropTypes . elementType ,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage : PropTypes . instanceOf ( Message ) ,
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum : PropTypes . oneOf ( [ 'News' , 'Photos' ] ) ,
// An object that could be one of many types
optionalUnion : PropTypes . oneOfType ( [
PropTypes . string ,
PropTypes . number ,
PropTypes . instanceOf ( Message )
] ) ,
// An array of a certain type
optionalArrayOf : PropTypes . arrayOf ( PropTypes . number ) ,
// An object with property values of a certain type
optionalObjectOf : PropTypes . objectOf ( PropTypes . number ) ,
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
// An object taking on a particular shape
optionalObjectWithShape : PropTypes . shape ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
// An object with warnings on extra properties
optionalObjectWithStrictShape : PropTypes . exact ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
requiredFunc : PropTypes . func . isRequired ,
// A value of any data type
requiredAny : PropTypes . any . isRequired ,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp : function ( props , propName , componentName ) {
if ( ! / matchme / . test ( props [ propName ] ) ) {
return new Error (
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
) ;
}
} ,
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp : PropTypes . arrayOf ( function ( propValue , key , componentName , location , propFullName ) {
if ( ! / matchme / . test ( propValue [ key ] ) ) {
return new Error (
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
) ;
}
} )
} ;Reportez-vous à la documentation React pour plus d'informations.
Consultez Migrating from React.PropTypes pour plus de détails sur la façon de migrer vers prop-types à partir de React.PropTypes .
Notez que ce billet de blog mentionne un script codemod qui effectue la conversion automatiquement .
Vous trouverez également des notes importantes ci-dessous.
Pour les applications, nous vous recommandons de le placer dans dependencies avec une plage de carets. Par exemple:
"dependencies" : {
"prop-types" : "^15.5.7"
} Pour les bibliothèques, nous recommandons également de le laisser dans dependencies :
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Remarque : il existe des problèmes connus dans les versions antérieures à 15.5.7, nous vous recommandons donc de l'utiliser comme version minimale.
Assurez-vous que la plage de versions utilise un caret ( ^ ) et qu'elle est donc suffisamment large pour que npm puisse dédupliquer efficacement les packages.
Pour les bundles UMD de vos composants, assurez-vous de ne pas inclure PropTypes dans la build. Cela se fait généralement en le marquant comme externe (les spécificités dépendent de votre bundler), tout comme vous le faites avec React.
Ce package est compatible avec React 0.14.9 . Par rapport à la version 0.14.8 (sortie en mars 2016), il n'y a aucun autre changement dans la version 0.14.9, il devrait donc s'agir d'une mise à niveau indolore.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Ce package est compatible avec React 15.3.0 et supérieur.
npm install --save react@^15.3.0 react-dom@^15.3.0
Il génère des avertissements avec le message ci-dessous même si le développeur ne fait rien de mal. Malheureusement, il n'y a pas de solution autre que la mise à jour de React vers la version 15.3.0 ou supérieure, ou vers la version 0.14.9 si vous utilisez React 0.14.
React.PropTypes : n'appelez pas les fonctions de validation Tout d’abord, quelle version de React utilisez-vous ? Vous voyez peut-être ce message car une bibliothèque de composants a été mise à jour pour utiliser le package prop-types , mais votre version de React est incompatible avec celle-ci. Voir la section ci-dessus pour plus de détails.
Utilisez-vous React 0.14.9 ou une version supérieure à React 15.3.0 ? Continuez à lire.
Lorsque vous migrez des composants pour utiliser les prop-types autonomes, toutes les fonctions de validation commenceront à générer une erreur si vous les appelez directement . Cela garantit que personne ne compte sur eux dans le code de production, et il est possible de supprimer en toute sécurité leurs implémentations pour optimiser la taille du bundle.
Un code comme celui-ci est toujours correct :
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; Cependant, un code comme celui-ci ne fonctionnera pas avec le package prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Cela générera une erreur :
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Si vous voyez un avertissement plutôt qu'une erreur avec ce message, veuillez consulter la section ci-dessus sur la compatibilité.)
Il s'agit d'un nouveau comportement, et vous ne le rencontrerez que lorsque vous migrerez de React.PropTypes vers le package prop-types . Pour la grande majorité des composants, cela n'a pas d'importance, et si vous n'avez pas vu cet avertissement dans vos composants, votre code peut migrer en toute sécurité. Il ne s'agit pas d'un changement radical dans React, car vous optez uniquement pour ce changement pour un composant en modifiant explicitement vos importations pour utiliser prop-types . Si vous avez temporairement besoin de l'ancien comportement, vous pouvez continuer à utiliser React.PropTypes jusqu'à React 16.
Si vous devez absolument déclencher la validation manuellement , appelez PropTypes.checkPropTypes() . Contrairement aux validateurs eux-mêmes, cette fonction peut être appelée en toute sécurité en production, car elle sera remplacée par une fonction vide :
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Voir ci-dessous pour plus d'informations.
Si vous souhaitez utiliser la validation en production , vous pouvez choisir d'utiliser la version de développement en important/exigeant prop-types/prop-types au lieu de prop-types .
Vous pouvez également voir cette erreur si vous appelez un validateur PropTypes à partir de votre propre validateur PropTypes personnalisé. Dans ce cas, la solution consiste à vous assurer que vous transmettez tous les arguments à la fonction interne. Il y a une explication plus détaillée sur la façon de résoudre ce problème sur cette page. Alternativement, vous pouvez continuer temporairement à utiliser React.PropTypes jusqu'à React 16, car cela ne ferait toujours qu'avertir dans ce cas.
Si vous utilisez un bundler comme Browserify ou Webpack, n'oubliez pas de suivre ces instructions pour bundler correctement votre application en mode développement ou production. Sinon, vous enverrez du code inutile à vos utilisateurs.
React vérifiera automatiquement les propTypes que vous avez définis sur le composant, mais si vous utilisez PropTypes sans React, vous souhaiterez peut-être appeler manuellement PropTypes.checkPropTypes , comme ceci :
const myPropTypes = {
name : PropTypes . string ,
age : PropTypes . number ,
// ... define your prop validations
} ;
const props = {
name : 'hello' , // is valid
age : 'world' , // not valid
} ;
// Let's say your component is called 'MyComponent'
// Works with standalone PropTypes
PropTypes . checkPropTypes ( myPropTypes , props , 'prop' , 'MyComponent' ) ;
// This will warn as follows:
// Warning: Failed prop type: Invalid prop `age` of type `string` supplied to
// `MyComponent`, expected `number`. PropTypes.checkPropTypes(...) console.error ne reçoit un message qu'une seule fois. Pour réinitialiser le cache d'avertissement d'erreur dans les tests, appelez PropTypes.resetWarningCache()
prop-types est sous licence MIT.
