React中使用PropTypes进行类型检查

• 随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。
• 对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。
• 但即使你不使用这些扩展，React 也内置了一些类型检查的功能。
  要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性

示例
引入 PropTypes,方式:import PropTypes from 'prop-types'

1. 通过props接收到父组件中传递的数据
   

   

2. 规定传递的数据类型
   

   

IsRequired

设置值是必传项,不传会报错

PropTypes.element

通过PropTypes.element规定传递的类型是一个元素

  xxx.propTypes = {
    xxx: xxx.PropTypes.element
  }

默认 Prop 值

通过配置defaultProps属性定义props的默认值

  xxx.defaultProps= {
    xxx: 'Hello React!' // 不传值,此字段为默认内容
  }

其他数据类型

  xxx.propTypes = {
    xxx: PropTypes.bool // 必须为布尔类型
    xxx: PropTypes.func // 必须为函数
    xxx: PropTypes.number // 必须为数字类型
    xxx: PropTypes.object // 必须为对象
    xxx: PropTypes.string // 必须为字符串
    xxx: PropTypes.symbol // 必须为symbol类型
    xxx: PropTypes.oneOf(['haha', 'nishizhu']) // 传递的值,为指定的值
    xxx: PropTypes.shape({ // 可以指定一个对象内由特定的类型值组成
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  }