React props 和类似对象的运行时类型检查。
您可以使用 prop-types 来记录传递给组件的属性的预期类型。 React（以及可能的其他库 - 请参阅下面的checkPropTypes()参考）将根据这些定义检查传递给组件的 props，并在开发中警告它们是否不匹配。
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 迁移，了解如何从React.PropTypes迁移到prop-types详细信息。
请注意，这篇博客文章提到了一个自动执行转换的 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 年 3 月发布）相比，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，但如果您在没有 React 的情况下使用 PropTypes，那么您可能需要手动调用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 许可。
