Props验证对于组件的正确使用是一种非常有用的方式。它可以避免随着你的应用的程序越来越复杂从而出现很多的bug和问题。并且,它还可以是你的程序变得更易读。
那如何对Props进行验证呢,其实很简单,React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效(也就是向Props传入的数据类型和验证的数据类型不符)就会在控制台发出警告信息
场景如下:
父组件给子组件传递方法,供子组件调用,但是接受时报错,具体如下
src/pages/logic-flow/task-manage/index.js
Line 53:10: 'closeModel' is missing in props validation react/prop-types
Search for the keywords to learn more about each error
写法很普通
<FormListTpl ref={childRef} closeModel={closeModel} />
let FormListTpl = (props,ref) => {
const {closeModel} = props;
return(
...
)
}
解决方案 (react15.5以上)
react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
import PropTypes from 'prop-types'
let FormListTpl = (props)=>{}
FormListTpl.propTypes = {
closeModel: PropTypes.func
}
附带一些常用类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
react15.5 以下
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,