props校验

Posted 2021-01-31 mapsxy

props类型校验
由于react在新版本中移除了类型校验，我们需要下载一个prop-types的包

propTypes.number
propTypes.string
propTypes.func
propTypes.bool
propTypes.object
propTypes.array
propTypes.symbol
propTypes.node (react元素)验证值为结点
propTypes.element (react组件)验证值为元素
propTypes.any （任意数据类型）
propTypes.oneOfType([types....]) 选择满足数组中的一种验证规则就可以
propTypes.isRequired (props必须传值，而且可以链式调用)
callback(props，propsName,componentName)自定义校验必须返回一个new Error()

·js
yarn add prop-types --save
使用
import Proptotypes from "prop-types"
class App extends React.Component{
第一种方法
static propTypes={
params:PropTypes.type
}
}
二种方法
App.proptotypes={
params:PropTypes.type
}
props默认值
import Proptotypes from "prop-types"
class App extends React.Component{
static defaultProps={
params:<any>
}
}
第二种方法
App.defaultProps={
params:<any>
}

非受控组件即组件的状态改变不受控制
受控组件无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。