报错原因: 对于组件来说,props 是外来的,无法保证组件使用者传入数据的格式正确,如果传入的数据格式不对,可能会导致组件内部报错,而组件的使用者不能很明确的知道错误的原因。
校验前:
校验后:
显而易见:没有校验props的报错看起来让人摸不着头脑,校验props之后的报错看起来更直观,更有利于我们对于代码的维护。
切入正题!怎样校验props?
-
安装并导入
prop-types
包。npm i prop-types // 或者 yarn add prop-types
-
使用
组件名.propTypes = {}
来给组件的 props 添加校验规则 -
校验规则通过
PropTypes
对象来指定。Test.propTypes = { arr: PropTypes.array }
常见的校验规则
-
常见类型:number、string、bool、array、func、object。
-
React 元素类型(JSX):element。
-
必填项:isRequired。
-
特定结构的对象:shape({})。
{
// 常见类型
// 函数
fn1: PropTypes.func,
// 必选
fn2: PropTypes.func.isRequired,
// 特定结构的对象
obj: PropTypes.shape({
// 字符串
color: PropTypes.string,
// 数值型
fontSize: PropTypes.number
})
}
props 默认值
好处: 即便外部不传递也不至于程序报错;简化代码(有可能就是有一些数据是很常用的,这样的话指定默认值外界不需要每次都传递啦
给props提供默认值有两种方式;
1. 通过 defaultProps 给组件的 props 设置默认值,在未传入 props 的时候生效。
// 当没有传入age属性的时候,给age设置一个默认值
import React, { Component } from 'react'
class Test extends Component {
render() {
return <div>{this.props.age}</div>
}
}
// 通过 defaultProps 来设置默认值
Test.defaultProps = {
age: 18,
}
export default Test
2. 利用ES6的设置默认值的方法
import React, { Component } from 'react'
class Test extends Component {
render() {
// 直接在解构的时候赋予默认值
const { age = 18 } = this.props
return <div>{age}</div>
}
}
export default Test