Verificação de tipo de tempo de execução para adereços React e objetos semelhantes.
Você pode usar prop-types para documentar os tipos pretendidos de propriedades passadas aos componentes. O React (e potencialmente outras bibliotecas - veja a referência checkPropTypes() abaixo) verificará os adereços passados para seus componentes em relação a essas definições e avisará no desenvolvimento se eles não corresponderem.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Se você preferir excluir prop-types do seu aplicativo e usá-lo globalmente por meio de window.PropTypes , o pacote prop-types fornece distribuições de arquivo único, que são hospedadas nos seguintes CDNs:
<!-- 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 carregar uma versão específica de prop-types substitua 15.6.0 pelo número da versão.
PropTypes foi originalmente exposto como parte do módulo principal do React e é comumente usado com componentes do React. Aqui está um exemplo de uso de PropTypes com um componente React, que também documenta os diferentes validadores fornecidos:
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 a documentação do React para obter mais informações.
Confira Migrando de React.PropTypes para obter detalhes sobre como migrar para prop-types de React.PropTypes .
Observe que esta postagem do blog menciona um script codemod que executa a conversão automaticamente .
Há também notas importantes abaixo.
Para aplicativos, recomendamos colocá-lo em dependencies com um intervalo de circunflexos. Por exemplo:
"dependencies" : {
"prop-types" : "^15.5.7"
} Para bibliotecas, também recomendamos deixar nas dependencies :
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Observação: há problemas conhecidos em versões anteriores à 15.5.7, portanto recomendamos usá-la como versão mínima.
Certifique-se de que o intervalo de versões use um sinal de intercalação ( ^ ) e, portanto, seja amplo o suficiente para que o npm desduplicar pacotes com eficiência.
Para pacotes UMD de seus componentes, certifique-se de não incluir PropTypes no build. Geralmente isso é feito marcando-o como externo (as especificações dependem do seu bundler), assim como você faz com o React.
Este pacote é compatível com React 0.14.9 . Comparado com o 0.14.8 (lançado em março de 2016), não há outras alterações no 0.14.9, portanto deve ser uma atualização fácil.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Este pacote é compatível com React 15.3.0 e superior.
npm install --save react@^15.3.0 react-dom@^15.3.0
Ele gera avisos com a mensagem abaixo, mesmo que o desenvolvedor não faça nada de errado. Infelizmente não há outra solução para isso além de atualizar o React para 15.3.0 ou superior, ou 0.14.9 se você estiver usando o React 0.14.
React.PropTypes : não chame funções validadoras Primeiro de tudo, qual versão do React você está usando ? Você pode estar vendo esta mensagem porque uma biblioteca de componentes foi atualizada para usar o pacote prop-types , mas sua versão do React é incompatível com ela. Consulte a seção acima para obter mais detalhes.
Você está usando o React 0.14.9 ou uma versão superior ao React 15.3.0? Continue lendo.
Quando você migra componentes para usar prop-types independentes, todas as funções do validador começarão a gerar um erro se você as chamar diretamente . Isso garante que ninguém dependa deles no código de produção e é seguro retirar suas implementações para otimizar o tamanho do pacote.
Código como este ainda está bom:
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; No entanto, códigos como este não funcionarão com o pacote prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Irá gerar um erro:
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Se você vir um aviso em vez de um erro com esta mensagem, verifique a seção acima sobre compatibilidade.)
Este é um comportamento novo e você só o encontrará ao migrar de React.PropTypes para o pacote prop-types . Para a grande maioria dos componentes, isso não importa e, se você não viu esse aviso em seus componentes, seu código pode ser migrado com segurança. Esta não é uma alteração significativa no React porque você está apenas optando por essa alteração para um componente alterando explicitamente suas importações para usar prop-types . Se você precisar temporariamente do comportamento antigo, poderá continuar usando React.PropTypes até o React 16.
Se for absolutamente necessário acionar a validação manualmente , chame PropTypes.checkPropTypes() . Ao contrário dos próprios validadores, esta função é segura para ser chamada em produção, pois será substituída por uma função vazia:
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Veja abaixo para mais informações.
Se você deseja usar validação em produção , você pode optar por usar a versão de desenvolvimento importando/exigindo prop-types/prop-types em vez de prop-types .
Você também poderá ver esse erro se estiver chamando um validador PropTypes de seu próprio validador PropTypes personalizado. Nesse caso, a solução é garantir que você esteja passando todos os argumentos para a função interna. Há uma explicação mais detalhada sobre como corrigi-lo nesta página. Alternativamente, você pode continuar usando React.PropTypes temporariamente até o React 16, pois ele ainda avisaria apenas neste caso.
Se você usa um empacotador como Browserify ou Webpack, não se esqueça de seguir estas instruções para agrupar corretamente seu aplicativo no modo de desenvolvimento ou produção. Caso contrário, você enviará código desnecessário aos seus usuários.
O React verificará automaticamente os propTypes que você definiu no componente, mas se você estiver usando PropTypes sem React, convém chamar manualmente PropTypes.checkPropTypes , assim:
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(...) apenas console.error sa determinada mensagem uma vez. Para redefinir o cache de aviso de erro em testes, chame PropTypes.resetWarningCache()
prop-types é licenciado pelo MIT.
