```
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>
)
}
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request