Laufzeittypprüfung für React-Requisiten und ähnliche Objekte.
Sie können Prop-Types verwenden, um die beabsichtigten Arten von Eigenschaften zu dokumentieren, die an Komponenten übergeben werden. React (und möglicherweise auch andere Bibliotheken – siehe die checkPropTypes() -Referenz unten) prüft die an Ihre Komponenten übergebenen Requisiten anhand dieser Definitionen und warnt in der Entwicklung, wenn sie nicht übereinstimmen.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Wenn Sie prop-types lieber aus Ihrer Anwendung ausschließen und sie global über window.PropTypes verwenden möchten, bietet das prop-types -Paket Einzeldateiverteilungen, die auf den folgenden CDNs gehostet werden:
<!-- 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 > Um eine bestimmte Version von prop-types zu laden, ersetzen Sie 15.6.0 durch die Versionsnummer.
PropTypes wurde ursprünglich als Teil des React-Kernmoduls bereitgestellt und wird häufig mit React-Komponenten verwendet. Hier ist ein Beispiel für die Verwendung von PropTypes mit einer React-Komponente, das auch die verschiedenen bereitgestellten Validatoren dokumentiert:
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.'
) ;
}
} )
} ;Weitere Informationen finden Sie in der React-Dokumentation.
Weitere Informationen zur Migration zu prop-types von React.PropTypes finden Sie unter „Migration von React.PropTypes .
Beachten Sie, dass in diesem Blogbeitrag ein Codemod-Skript erwähnt wird, das die Konvertierung automatisch durchführt .
Nachfolgend finden Sie auch wichtige Hinweise.
Für Apps empfehlen wir, sie in dependencies mit einem Caret-Bereich einzufügen. Zum Beispiel:
"dependencies" : {
"prop-types" : "^15.5.7"
} Für Bibliotheken empfehlen wir außerdem , es in dependencies zu belassen:
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Hinweis: Es gibt bekannte Probleme in Versionen vor 15.5.7, daher empfehlen wir die Verwendung als Minimalversion.
Stellen Sie sicher, dass der Versionsbereich ein Caretzeichen ( ^ ) verwendet und daher breit genug ist, damit npm Pakete effizient deduplizieren kann.
Stellen Sie bei UMD-Bundles Ihrer Komponenten sicher, dass Sie keine PropTypes in den Build einbeziehen. Normalerweise erfolgt dies durch Markieren als extern (die Einzelheiten hängen von Ihrem Bundler ab), genau wie Sie es bei React tun.
Dieses Paket ist mit React 0.14.9 kompatibel. Im Vergleich zu 0.14.8 (das im März 2016 veröffentlicht wurde) gibt es in 0.14.9 keine weiteren Änderungen, daher sollte es sich um ein problemloses Upgrade handeln.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Dieses Paket ist mit React 15.3.0 und höher kompatibel.
npm install --save react@^15.3.0 react-dom@^15.3.0
Es werden Warnungen mit der folgenden Meldung ausgegeben, obwohl der Entwickler nichts falsch gemacht hat. Leider gibt es hierfür keine andere Lösung als die Aktualisierung von React auf 15.3.0 oder höher bzw. 0.14.9, wenn Sie React 0.14 verwenden.
React.PropTypes : Rufen Sie keine Validatorfunktionen auf Zunächst einmal: Welche Version von React verwenden Sie ? Diese Meldung wird möglicherweise angezeigt, weil eine Komponentenbibliothek aktualisiert wurde, um prop-types -Paket zu verwenden, Ihre Version von React jedoch nicht damit kompatibel ist. Weitere Einzelheiten finden Sie im obigen Abschnitt.
Verwenden Sie entweder React 0.14.9 oder eine höhere Version als React 15.3.0? Lesen Sie weiter.
Wenn Sie Komponenten migrieren, um die eigenständigen prop-types zu verwenden, beginnen alle Validatorfunktionen einen Fehler auszulösen, wenn Sie sie direkt aufrufen . Dadurch wird sichergestellt, dass sich niemand im Produktionscode auf sie verlässt, und es ist sicher, ihre Implementierungen zu entfernen, um die Bundle-Größe zu optimieren.
Code wie dieser ist immer noch in Ordnung:
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; Allerdings funktioniert Code wie dieser nicht mit dem Paket prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Es wird ein Fehler ausgegeben:
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Wenn bei dieser Meldung eher eine Warnung als ein Fehler angezeigt wird, lesen Sie bitte den obigen Abschnitt zur Kompatibilität.)
Dies ist ein neues Verhalten und Sie werden nur darauf stoßen, wenn Sie von React.PropTypes zum Paket prop-types migrieren. Für die überwiegende Mehrheit der Komponenten spielt dies keine Rolle, und wenn Sie diese Warnung in Ihren Komponenten nicht gesehen haben, kann Ihr Code sicher migriert werden. Dies ist keine bahnbrechende Änderung in React, da Sie sich nur für diese Änderung für eine Komponente entscheiden, indem Sie Ihre Importe explizit so ändern, dass sie prop-types verwenden. Wenn Sie vorübergehend das alte Verhalten benötigen, können Sie React.PropTypes bis React 16 weiterhin verwenden.
Wenn Sie die Validierung unbedingt manuell auslösen müssen , rufen Sie PropTypes.checkPropTypes() auf. Im Gegensatz zu den Validatoren selbst kann diese Funktion sicher in der Produktion aufgerufen werden, da sie durch eine leere Funktion ersetzt wird:
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Weitere Informationen finden Sie weiter unten.
Wenn Sie die Validierung in der Produktion verwenden möchten , können Sie die Entwicklungsversion verwenden, indem Sie prop-types/prop-types anstelle von prop-types importieren/anfordern.
Dieser Fehler wird möglicherweise auch angezeigt, wenn Sie einen PropTypes -Validator von Ihrem eigenen benutzerdefinierten PropTypes Validator aus aufrufen. In diesem Fall besteht die Lösung darin, sicherzustellen, dass Sie alle Argumente an die innere Funktion übergeben. Auf dieser Seite finden Sie eine ausführlichere Erklärung zur Behebung des Problems. Alternativ können Sie React.PropTypes vorübergehend bis React 16 weiter verwenden, da es in diesem Fall weiterhin nur warnt.
Wenn Sie einen Bundler wie Browserify oder Webpack verwenden, vergessen Sie nicht, diese Anweisungen zu befolgen, um Ihre Anwendung im Entwicklungs- oder Produktionsmodus korrekt zu bündeln. Andernfalls verschicken Sie unnötigen Code an Ihre Benutzer.
React überprüft automatisch die PropTypes, die Sie für die Komponente festgelegt haben. Wenn Sie PropTypes jedoch ohne React verwenden, möchten Sie möglicherweise PropTypes.checkPropTypes manuell aufrufen, etwa so:
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 wird nur einmal gesendet. Um den Fehlerwarnungscache in Tests zurückzusetzen, rufen Sie PropTypes.resetWarningCache() auf.
prop-types ist MIT-lizenziert.
