- 随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。
- 对于某些应用程序来说,你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。
- 但即使你不使用这些扩展,React 也内置了一些类型检查的功能。
要在组件的 props 上进行类型检查,你只需配置特定的 propTypes 属性
示例
引入 PropTypes
,方式:import PropTypes from 'prop-types'
- 通过props接收到父组件中传递的数据
- 规定传递的数据类型
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
}),
}