التحقق من نوع وقت التشغيل لدعائم 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()
أنواع الدعامة مرخصة من معهد ماساتشوستس للتكنولوجيا.
