React-组件-props 校验 类型 是否必填 默认值

作为一个前端人掌握 React 组件 props 的校验写法，增加组件的健壮性肯定是必备的知识点之一。如果一个组件没有 props 数据校验那么它是没有灵魂的也很难被推广应用开。下面我们来看一下怎么为 React 组件的 props 添加校验吧

首先 React 组件的 props 添加校验我们需要安装一个校验包：

实现步骤

1. 安装属性校验包：yarn add prop-types 或者 npm install --save prop-types
2. 导入 prop-types 包
3. 使用 组件名.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 组件中 props 的 colors 添加校验规则：类型必须为 array 且为必填项
List.propTypes = {
  colors: PropTypes.array.isRequired
}

props校验-规则说明

四种常见结构

1. 常见类型：array、bool、func、number、object、string
2. React 元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})

官网文档更多阅读：Typechecking With PropTypes – React

 props校验-默认值

通过 defaultProps 可以给组件的 props 设置默认值，在未传入 props 的时候生效

1. 函数组件

推荐写法：直接使用函数参数默认值。示例如下：

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize }
    </div>
  )
}

// 不传入pageSize属性
<List />

2. 类组件

推荐写法：使用类静态属性声明默认值，static defaultProps = {}。示例如下：

class List extends React.Component {
  static defaultProps = {
    pageSize: 10
  }
  render () {
    return (
      <div>
        此处展示props的默认值：{this.props.pageSize}
      </div>
    )
  }
}
<List />

函数组件和类组件都可以设置 props 默认值的方式（但不推荐）。示例如下：

class List extends React.Component {
  render () {
    return (
      <div>list{this.props.pageSize}</div>
    )
  }
}
// 为 List 组件 props 中的 pageSize 设置默认值为 10
List.defaultProps = {
  pageSize: 10    // 如果传了 pageSize 则以传入的为准，未传则去默认值10
}