Проверка типов во время выполнения для свойств React и подобных объектов.
Вы можете использовать типы свойств для документирования предполагаемых типов свойств, передаваемых компонентам. React (и, возможно, другие библиотеки — см. ссылку на checkPropTypes() ниже) проверит реквизиты, передаваемые вашим компонентам, на соответствие этим определениям и предупредит при разработке, если они не совпадают.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm Если вы предпочитаете исключить prop-types из своего приложения и использовать его глобально через window.PropTypes , пакет prop-types предоставляет однофайловые дистрибутивы, которые размещаются на следующих 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 > Чтобы загрузить конкретную версию prop-types замените 15.6.0 номером версии.
PropTypes изначально был представлен как часть основного модуля React и обычно используется с компонентами React. Вот пример использования PropTypes с компонентом React, который также документирует различные предоставленные валидаторы:
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.'
) ;
}
} )
} ;Дополнительную информацию можно найти в документации React.
См. раздел Миграция с React.PropTypes для получения подробной информации о том, как перейти на prop-types из React.PropTypes .
Обратите внимание, что в этом сообщении блога упоминается скрипт codemod, который автоматически выполняет преобразование .
Ниже также есть важные примечания.
Для приложений мы рекомендуем помещать его в dependencies с диапазоном курсоров. Например:
"dependencies" : {
"prop-types" : "^15.5.7"
} Для библиотек также рекомендуем оставить это в dependencies :
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}Примечание. Известны проблемы с версиями до 15.5.7, поэтому мы рекомендуем использовать ее как минимальную версию.
Убедитесь, что диапазон версий использует курсор ( ^ ) и, следовательно, достаточно широк, чтобы npm мог эффективно выполнять дедупликацию пакетов.
Для пакетов UMD ваших компонентов убедитесь, что вы не включаете PropTypes в сборку. Обычно это делается путем пометки его как внешнего (особенности зависят от вашего сборщика), как и в случае с React.
Этот пакет совместим с React 0.14.9 . По сравнению с версией 0.14.8 (выпущенной в марте 2016 года) в версии 0.14.9 нет других изменений, поэтому обновление должно пройти безболезненно.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9Этот пакет совместим с React 15.3.0 и выше.
npm install --save react@^15.3.0 react-dom@^15.3.0
Он выводит предупреждения с сообщением ниже, хотя разработчик не делает ничего плохого. К сожалению, для этой проблемы нет другого решения, кроме обновления React до версии 15.3.0 или выше или до версии 0.14.9, если вы используете React 0.14.
React.PropTypes : не вызывать функции валидатора Прежде всего, какую версию React вы используете ? Возможно, вы видите это сообщение, потому что библиотека компонентов обновлена для использования пакета prop-types , но ваша версия React с ним несовместима. Более подробную информацию смотрите в разделе выше.
Используете ли вы React 0.14.9 или версию выше React 15.3.0? Читайте дальше.
Когда вы мигрируете компоненты для использования автономных prop-types , все функции валидатора начнут выдавать ошибку, если вы вызовете их напрямую . Это гарантирует, что никто не будет использовать их в рабочем коде, и можно будет безопасно удалить их реализации для оптимизации размера пакета.
Такой код все еще в порядке:
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; Однако такой код не будет работать с пакетом prop-types :
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;Выдаст ошибку:
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(Если вы видите предупреждение, а не ошибку с этим сообщением, пожалуйста, проверьте раздел о совместимости выше.)
Это новое поведение, и вы столкнетесь с ним только при переходе с React.PropTypes на пакет prop-types . Для подавляющего большинства компонентов это не имеет значения, и если вы не увидели это предупреждение в своих компонентах, ваш код можно безопасно перенести. Это не критическое изменение в React, поскольку вы соглашаетесь на это изменение для компонента только путем явного изменения импорта для использования prop-types . Если вам временно нужно старое поведение, вы можете продолжать использовать React.PropTypes до React 16.
Если вам абсолютно необходимо запустить проверку вручную , вызовите PropTypes.checkPropTypes() . В отличие от самих валидаторов, эту функцию можно безопасно вызывать в рабочей среде, поскольку она будет заменена пустой функцией:
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;Дополнительную информацию смотрите ниже.
Если вы ДЕЙСТВИТЕЛЬНО хотите использовать проверку в производстве , вы можете использовать версию разработки , импортируя/требуя prop-types/prop-types вместо prop-types .
Вы также можете увидеть эту ошибку, если вызываете валидатор PropTypes из своего собственного валидатора PropTypes . В этом случае исправление состоит в том, чтобы убедиться, что вы передаете все аргументы внутренней функции. На этой странице есть более подробное объяснение того, как это исправить. В качестве альтернативы вы можете временно продолжать использовать React.PropTypes до версии React 16, так как в этом случае он все равно будет только предупреждать.
Если вы используете сборщик, такой как Browserify или Webpack, не забудьте следовать этим инструкциям, чтобы правильно связать свое приложение в режиме разработки или производства. В противном случае вы отправите своим пользователям ненужный код.
React автоматически проверит propTypes, которые вы установили для компонента, но если вы используете PropTypes без React, вы можете вручную вызвать PropTypes.checkPropTypes , например:
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 данное сообщение один раз. Чтобы сбросить кеш предупреждений об ошибках в тестах, вызовите PropTypes.resetWarningCache()
prop-types имеет лицензию MIT.
