Props验证——Props Validation (react 'xxx' is missing in props validation 问题)

3,190 阅读1分钟

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,