[JavaScript知识库]【react】解决props未校验报错

报错原因:?对于组件来说，props 是外来的，无法保证组件使用者传入数据的格式正确，如果传入的数据格式不对，可能会导致组件内部报错，而组件的使用者不能很明确的知道错误的原因。?

校验前：

?校验后：

?显而易见：没有校验props的报错看起来让人摸不着头脑，校验props之后的报错看起来更直观，更有利于我们对于代码的维护。

切入正题！怎样校验props？

1. 安装并导入 prop-types 包。

   npm i prop-types
   
   // 或者
   
   yarn add prop-types

2. ?使用 组件名.propTypes = {} 来给组件的 props 添加校验规则

3. 校验规则通过 PropTypes 对象来指定。

   Test.propTypes = {
   	arr: PropTypes.array
   }

常见的校验规则

1. 常见类型：number、string、bool、array、func、object。

2. React 元素类型（JSX）：element。

3. 必填项：isRequired。

4. 特定结构的对象：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