【Day13】型别检查 PropTypes

在 React 中,可以使用 React 配套插件
propTypes 来检查型别。

PropTypes 主要功能

  • 定义 component prop 的型别
  • 检查 component 的 prop 型别是否正确(仅在 React development 模式下执行),如果型别不正确,会在 console 丢出警告

安装指令

npm install --save prop-types

使用方式

从元件外部导入

引入 PropTypes 之後
就可以从已宣告的 component 上
直接使用 propTypes 属性

import PropTypes from 'prop-type';

class App extends React.Component{
	render(){
		return(){
			<h1>姓名:{this.props.name}</h1>
			<h1>年纪:{this.props.age}</h1>
		}
	}
}

App.propTypes = {
	name: PropTypes.string,
	age: PropTypes.number,
}

在元件内部使用

也可以在 class component 里
用 static 方式宣告

import PropTypes from 'prop-type';

class App extends React.Component{
	static propTypes = {
		name: PropTypes.string
	}
	
	render(){
		return(){
			<h1>{ this.props.name}</h1>
		}
	}
}

使用 PropTypes 物件注意事项

  • 每个 key 都要对应到 prop 包含的属性名称
  • 每个 value 则定义 component prop 的型别,通常使用 PropTypes 本身提供的函式(如 PropTypes.stringPropTypes.number 等)
  • PropTypes 提供的型别函式,本质上是一个 validator function,会使用型别检查器来检查 component props 的型别
  • PropTypes 也可以使用 isRequired 属性,用来定义是否必须提供某个 prop

isRequired 范例:

App.propTypes = {
	email: PropTypes.string.isRequired,
	password: PropTypes.string.isRequired,
	age: PropTypes.number,
}

参考资料


<<:  [Day14] 团队系统设计 - 重塑 Planning 会议

>>:  找资安工作,怎麽找?要学甚麽?该何去何从?

12.MYSQL 浅谈NULL

在资料库当中NULL还蛮常出现的,那NULL到底是什麽东西呢? NULL代表没有任何资料的一种型态,...

sed - 2 Pattern

前篇回顾 sed - 简介 读取编辑文字档的好工具 Pattern 这次聊点pattern的更多用法...

Day15 - 请蛇上台

class Snake { constructor() { // 蛇头位子 this.head = ...

Day28_CSS语法11

border-radius(框线圆角) border-top-left-radius : 左上角显示...

(Day6) 强制转型&显性转型

动态型别 前面有介绍 JavaScript 资料分成七种原始型别以及物件型别,关於型别 JavaSc...