การตรวจสอบประเภทรันไทม์สำหรับอุปกรณ์ประกอบฉาก React และวัตถุที่คล้ายกัน
คุณสามารถใช้ prop-type เพื่อจัดทำเอกสารประเภทคุณสมบัติที่ต้องการส่งไปยังส่วนประกอบต่างๆ 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 (ซึ่งเปิดตัวในเดือนมีนาคม 2559) ไม่มีการเปลี่ยนแปลงอื่นๆ ใน 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 : อย่าเรียกใช้ฟังก์ชัน Validator ก่อนอื่นเลย คุณใช้ 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
