Comprobación de tipos de tiempo de ejecución para accesorios de React y objetos similares.
Puede utilizar tipos de propiedades para documentar los tipos de propiedades previstas que se pasan a los componentes. React (y potencialmente otras bibliotecas; consulte la referencia checkPropTypes() a continuación) verificará los accesorios pasados a sus componentes con esas definiciones y advertirá en desarrollo si no coinciden.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Si prefiere excluir prop-types de su aplicación y usarlos globalmente a través de window.PropTypes , el paquete prop-types proporciona distribuciones de un solo archivo, que se alojan en las siguientes CDN:
<!-- 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 > Para cargar una versión específica de prop-types reemplace 15.6.0 con el número de versión.
PropTypes se expuso originalmente como parte del módulo principal de React y se usa comúnmente con los componentes de React. A continuación se muestra un ejemplo del uso de PropTypes con un componente React, que también documenta los diferentes validadores proporcionados:
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.'
) ;
}
} )
} ;Consulte la documentación de React para obtener más información.
Consulte Migración desde React.PropTypes para obtener detalles sobre cómo migrar a prop-types desde React.PropTypes .
Tenga en cuenta que esta publicación de blog menciona un script codemod que realiza la conversión automáticamente .
También hay notas importantes a continuación.
Para aplicaciones, recomendamos ponerlo en dependencies con un rango de intercalación. Por ejemplo:
"dependencies" : {
"prop-types" : "^15.5.7"
} Para las bibliotecas, también recomendamos dejarlo en dependencies :
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Nota: existen problemas conocidos en versiones anteriores a la 15.5.7, por lo que recomendamos usarla como versión mínima.
Asegúrese de que el rango de versiones utilice un símbolo de intercalación ( ^ ) y, por lo tanto, sea lo suficientemente amplio para que npm pueda deduplicar paquetes de manera eficiente.
Para paquetes UMD de sus componentes, asegúrese de no incluir PropTypes en la compilación. Por lo general, esto se hace marcándolo como externo (los detalles dependen de su paquete), tal como lo hace con React.
Este paquete es compatible con React 0.14.9 . En comparación con 0.14.8 (que se lanzó en marzo de 2016), no hay otros cambios en 0.14.9, por lo que debería ser una actualización sencilla.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Este paquete es compatible con React 15.3.0 y superior.
npm install --save react@^15.3.0 react-dom@^15.3.0
Genera advertencias con el siguiente mensaje aunque el desarrollador no haya hecho nada malo. Lamentablemente, no hay otra solución para esto que no sea actualizar React a 15.3.0 o superior, o 0.14.9 si estás usando React 0.14.
React.PropTypes : no llamar a funciones de validación En primer lugar, ¿qué versión de React estás usando ? Es posible que veas este mensaje porque una biblioteca de componentes se actualizó para usar el paquete prop-types , pero tu versión de React no es compatible con él. Consulte la sección anterior para obtener más detalles.
¿Estás utilizando React 0.14.9 o una versión superior a React 15.3.0? Sigue leyendo.
Cuando migra componentes para usar prop-types independientes, todas las funciones de validación comenzarán a generar un error si las llama directamente . Esto garantiza que nadie dependa de ellos en el código de producción y que sea seguro eliminar sus implementaciones para optimizar el tamaño del paquete.
Código como este todavía está bien:
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; Sin embargo, código como este no funcionará con el paquete prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Tirará un error:
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Si ve una advertencia en lugar de un error con este mensaje, consulte la sección anterior sobre compatibilidad).
Este es un comportamiento nuevo y solo lo encontrará cuando migre de React.PropTypes al paquete prop-types . Para la gran mayoría de los componentes, esto no importa y, si no vio esta advertencia en sus componentes, es seguro migrar su código. Este no es un cambio importante en React porque solo está optando por este cambio para un componente al cambiar explícitamente sus importaciones para usar prop-types . Si necesita temporalmente el comportamiento anterior, puede seguir usando React.PropTypes hasta React 16.
Si es absolutamente necesario activar la validación manualmente , llame a PropTypes.checkPropTypes() . A diferencia de los propios validadores, es seguro llamar a esta función en producción, ya que será reemplazada por una función vacía:
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Consulte a continuación para obtener más información.
Si SÍ desea utilizar la validación en producción , puede optar por utilizar la versión de desarrollo importando/solicitando prop-types/prop-types en lugar de prop-types .
También puedes ver este error si llamas a un validador PropTypes desde tu propio validador PropTypes personalizado. En este caso, la solución es asegurarse de pasar todos los argumentos a la función interna. Hay una explicación más detallada de cómo solucionarlo en esta página. Alternativamente, puedes seguir usando React.PropTypes temporalmente hasta React 16, ya que solo advertiría en este caso.
Si utiliza un paquete como Browserify o Webpack, no olvide seguir estas instrucciones para empaquetar correctamente su aplicación en modo de desarrollo o producción. De lo contrario, enviará código innecesario a sus usuarios.
React verificará automáticamente los propTypes que configuró en el componente, pero si está usando PropTypes sin React, es posible que desee llamar manualmente PropTypes.checkPropTypes , así:
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(...) solo console.error es un mensaje dado una vez. Para restablecer el caché de advertencia de error en las pruebas, llame PropTypes.resetWarningCache()
prop-types tiene licencia del MIT.
