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 コンポーネントで使用されます。 React コンポーネントで PropTypes を使用する例を次に示します。これには、提供されるさまざまなバリデーターも記載されています。
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 年 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 以降、または React 0.14 を使用している場合は 0.14.9 に更新する以外に、これに対する解決策はありません。
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 16 までReact.PropTypes使い続けることができます。
どうしても検証を手動でトリガーする必要がある場合は、 PropTypes.checkPropTypes()を呼び出します。バリデータ自体とは異なり、この関数は空の関数に置き換えられるため、本番環境で安全に呼び出すことができます。
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;詳細については、以下を参照してください。
運用環境で検証を使用したい場合は、 prop-typesの代わりにprop-types/prop-typesインポート/要求することで、開発バージョンの使用を選択できます。
独自のカスタムPropTypesバリデーターからPropTypesバリデーターを呼び出している場合にも、このエラーが表示される可能性があります。この場合の修正方法は、すべての引数を内部関数に確実に渡すことです。修正方法については、このページで詳しく説明されています。あるいは、この場合は警告のみが表示されるため、React 16 まで一時的にReact.PropTypesを使用し続けることもできます。
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 ライセンスを取得しています。
