React进阶 - 11（说一说 PropTypes 和 DefaultProps ）

本章内容

目录

PropTypes
DefaultProps

截止到上一节的内容，我们使用了一个 TodoList的案例，大概了解了 React的一些入门知识。从本节内容开始，我们将进入React进阶知识的学习

PropTypes

在组件拆分时，我们知道每个组件都有自己的 props,这个参数是从父组件那里接收的一些数据。
那么有个疑问，子组件在接受参数的时候，怎么对这些参数”类型“做校验呢，又如何定义参数的”默认值“呢？
打开之前工程里的 TodoItem.js组件，可以看到其父组件传过来的参数都有属于自己的”类型“
在 React可以使用 PropTypes对传递的属性进行”类型“强校验

import React, { Component } from 'react'
import PropTypes from 'prop-types' // 1、引入 PropTypesclass TodoItem extends Component {constructor(props) {super(props)this.handleClick = this.handleClick.bind(this)}render () {const { content } = this.propsreturn (<div onClick={this.handleClick}>{content}</div>)}handleClick() {const { deleteFn, index } = this.propsdeleteFn(index)}
}// 2、使用 PropTypes 对属性进行强校验
TodoItem.propTypes = {content: PropTypes.string,index: PropTypes.number,deleteFn: PropTypes.func
}export default TodoItem

运行代码后，发现正常运行，没有报错。
注意的是，如果你在子组件将 index的类型设置为 string, 界面将会出现一个”警告“，因为父组件那边传递的类型是 number类型，跟设定的不符

import React, { Component } from 'react'
import PropTypes from 'prop-types' // 1、引入 PropTypesclass TodoItem extends Component {constructor(props) {super(props)this.handleClick = this.handleClick.bind(this)}render () {const { content } = this.propsreturn (<div onClick={this.handleClick}>{content}</div>)}handleClick() {const { deleteFn, index } = this.propsdeleteFn(index)}
}// 2、使用 PropTypes 对属性进行强校验
TodoItem.propTypes = {content: PropTypes.string,index: PropTypes.string, // 如果这里设置为 string,那么界面会出现警告deleteFn: PropTypes.func
}export default TodoItem

DefaultProps

接着上面的代码，现在有个新需求：假设在子组件中，子组件必须要求父组件给它传递一个”属性“（例如：title）, 但是父组件由于某些原因，不能传递这个属性，此时应该怎么解决呢？

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 () {// 1、子组件要求父组件给它传递一个 title 属性const { content, title } = this.propsreturn (<div onClick={this.handleClick}>{/* 2、并且将 title 属性显示在界面上 */}{title}---{content}</div>)}handleClick() {const { deleteFn, index } = this.propsdeleteFn(index)}
}TodoItem.propTypes = {title: PropTypes.string.isRequired, // 3、要求父组件必须传递一个 title 属性content: PropTypes.string,index: PropTypes.number,deleteFn: PropTypes.func
}export default TodoItem

运行一下界面，发现控制台出现了一个警告(因为父组件确实没有传递这个 title属性，但是子组件他又必须要)。
要解决上面的警告，那使用 defaultProps给 title属性设置一个”默认值“

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, title } = this.propsreturn (<div onClick={this.handleClick}>{title}---{content}</div>)}handleClick() {const { deleteFn, index } = this.propsdeleteFn(index)}
}TodoItem.propTypes = {title: PropTypes.string.isRequired,content: PropTypes.string,index: PropTypes.number,deleteFn: PropTypes.func
}TodoItem.defaultProps = {title: '我是子组件' // 给 title 设置一个”默认值“
}export default TodoItem