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 許可。
