props校验-场景和使用

目标任务: 掌握组件props的校验写法，增加组件的健壮性

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键 - 组件的使用者可能报错了也不知道为什么，看下面的例子

面对这样的问题，如何解决？ props校验

实现步骤

安装属性校验包：yarn add prop-types

导入prop-types 包

使用 组件名.propTypes = {} 给组件添加校验规则

核心代码

import PropTypes from 'prop-types'

const List = props => {

  const arr = props.colors

  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)

  return <ul>{lis}</ul>

}

List.propTypes = {

  colors: PropTypes.array

}

props校验-规则说明

目标任务: 掌握props常见的规则

四种常见结构

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

React元素类型：element

必填项：isRequired

特定的结构对象：shape({})

核心代码

// 常见类型

optionalFunc: PropTypes.func,

// 必填 只需要在类型后面串联一个isRequired

requiredFunc: PropTypes.func.isRequired,

// 特定结构的对象

optionalObjectWithShape: PropTypes.shape({

color: PropTypes.string,

fontSize: PropTypes.number

})

官网文档更多阅读：https://reactjs.org/docs/typechecking-with-proptypes.html