``` import React, { Component } from 'react' import PropTypes from 'prop-types'; export default class DataTypeAttribute extends Component { // 配置props默認值 static defaultProps = { is: false } // ----------------------------------------------------------------------- // 調用相應的函數進行驗證 // PropTypes.any -- 數組類型 // PropTypes.bool -- 布爾值 // PropTypes.func -- 函數類型 // PropTypes.number -- 數字類型 // PropTypes.object -- 對象類型 // PropTypes.string -- 字符串類型 // PropTypes.symbol -- 符號類型 // PropTypes.node -- 任何可以被渲染的內容(string、number、react元素、) // PropTypes.element -- React元素 // PropTypes.elementType -- React元素類型 // PropTYpes.instanceOf(構造函數) -- 必須是制定構造函數的實例 // PropTypes.oneOf([xxx,xxx]) -- 枚舉(需要傳遞該數組中包含的值'xxx') // PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.xxx]) -- 傳遞的類型必須是數組中的其中一種 // PropTypes.arrayOf(PropTypes.xxx) -- 必須是某一類型組成的數組、(必須傳遞數組類型，并且約束數組中的每一項必須是string/number等類型) PropTypes.arrayOf(PropTypes.number) // PropTypes.objectOf(PropTypes.xxx) -- 對象由某一類型的值組成 // PropTypes.shape({ // 更加具體的約束、 // name: PropTypes.string.isRequired, // age: PropTypees.number // address: PropTypes.shape({xxx:PropTypes.string}).isRequired // 表示這個對象必填 // }) // PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string, age:PropTypes.number})) // 數組中的每一項必須為object，并且約束每一項的屬性 // PropTypes.exact({...}); // 同PropTypes.shape一樣。對象必須精確匹配傳遞的數據 // ----------------------------------------------------------------------- // 校驗props屬性 static propTypes = { // isRequired -- 必填 // bool -- Boolean is: PropTypes.bool.isRequired, a: PropTypes.number.isRequired, b: PropTypes.any, c: PropTypes.node, // ... // 自定義校驗規則 score: function (props, propName, componentName) { console.log(props, propName, componentName); const val = props[propName]; if (typeof val === 'number' && (val >= 0 && val <= 100)) { return; } else { return new Error(propName + ' 該屬性必須是一個數字，并且取值范圍是0~100。'); } } } render() { return ( <div> {this.props.score} </div> ) } } ```