React中使用PropTypes进行类型检查

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

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

  1. 通过props接收到父组件中传递的数据
    React中使用PropTypes进行类型检查
  2. 规定传递的数据类型
    React中使用PropTypes进行类型检查

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
  }),
  }
上一篇:我学到的一下vue使用技巧


下一篇:React Router