转载请注明出处，未经同意，不可修改文章内容。🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题"，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
javascript
涉及面试题：
1. 静态类型检查推荐的方法是什么？
2. 什么是 PropTypes？
3. 什么是 React proptype 数组？
[编号：react_11]1 PropTypes
通过之前的学习，我们知道每个子组件都有自己的 props 参数，这个参数是从父组件接收的一些"属性"。
本篇我们会讲解：子组件在接收参数时，应该如何对参数的"类型"做校验，如何定义参数的"默认值"。
❓需求：我要使父组件传给子组件的值必须符合子组件规定的某种"类型"，不能乱传（这也是我们开发过程中需要做的一点）。
答： 1️⃣打开 TodoItem.js 文件，我们可以看到父组件传过来的"值"。
这些"值"都有属于自己的"类型"： 
2️⃣子组件引入 PropTypes 对传递过来的属性做一个"类型"的强校验：
jsx
import React, { Component } from "react";
import PropTypes from "prop-types"; /*
2️⃣-①：由于脚手架工具里边已经自带了 prop-types 这个包，
所以我们可以直接引入 PropTypes；
❗️❗️❗️注意大小写！
*/
class TodoItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
const {content} = this.props
return(
<div onClick={this.handleClick}>
{content}
</div>
)
}
handleClick() {
const {itemDelete, index} = this.props
itemDelete(index)
}
}
TodoItem.propTypes = { // 2️⃣-②：这行代码表示对 TodoItem 这个组件做"属性"的校验；
// 2️⃣-③：分别对以下属性做校验；
content: PropTypes.string, /*
2️⃣-④：这行代码表示，content 这个 prop，
它的"类型"必须是一个 string 类型；
❗️❗️❗️注意这里的大小写！
*/
itemDelete: PropTypes.func,
index: PropTypes.number
}
export default TodoItem;返回页面看下效果（没任何报错，因为父组件所传的值，都符合子组件要求的"类型"）：
❌但，如果我在子组件里要求 index 的类型为 string ，这时页面就会给我们报"警告"（因为父组件传过来的是 number 类型，但你子组件却要 string 类型）：
javascript
index: PropTypes.string
2 DefaultProps
紧接上文的代码，我们有一个新的需求：
❓在子组件里，子组件必须要求父组件给它传递一个"属性"（如 test ），但父组件因某些原因，确实不能传递这个 test 。此时应该怎么解决呢？
jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
class TodoItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
const {content, test} = this.props /*
1️⃣
1️⃣-①：在子组件里，
子组件要求父组件给它传递一个"属性"test；
*/
return(
<div onClick={this.handleClick}>
{test}-{content} {/* 1️⃣-②：并且，想把 test 展示在页面上； */}
</div>
)
}
handleClick() {
const {itemDelete, index} = this.props
itemDelete(index)
}
}
TodoItem.propTypes = {
test: PropTypes.string.isRequired, /*
1️⃣-③：这个"属性"test 的"类型"是 string，
且是"必须"的。
*/
content: PropTypes.string,
itemDelete: PropTypes.func,
index: PropTypes.number
}
export default TodoItem;我们看看页面效果（控制台报了"警告"，因为父组件确实没有传递这个 test 属性，但子组件又规定必须要，所以程序给我们报了警告！）： 
❓怎么解除上边的"警告"呢？
答： 2️⃣在 TodoItem 里，给属性 test 定义一个"默认值"；
jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
class TodoItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
const {content, test} = this.props
return(
<div onClick={this.handleClick}>
{test}{content}
</div>
)
}
handleClick() {
const {itemDelete, index} = this.props
itemDelete(index)
}
}
TodoItem.propTypes = {
test: PropTypes.string.isRequired,
content: PropTypes.string,
itemDelete: PropTypes.func,
index: PropTypes.number
}
TodoItem.defaultProps = { // 2️⃣-①：给 TodoItem 增添一些"默认属性"；
test: "hello, " /*
2️⃣-②：比如增加一个默认属性 test，其值为 "hello, " 。
表示，即使父组件没办法给我子组件传递这个 test 属性，我子组件依然能够
使用 test 属性，因为我自己定义了一个"默认值"。
*/
}
export default TodoItem;查看页面效果（"警告"解除，且显示出了"默认值" hello, ）： 
可在彻底掌握本文的基础上，去阅读官方英文文档加深理解！
祝好，qdywxs ♥ you！