React PropTypes检验传递的值

在工作当中，我们进行传参一定要对象传递的数据进行校验，如果不校验的话，大量的数据传递，会造成混乱，业务逻辑也没办法保证。

引入prop-types

//prop-types 父传子 要在子组件引入并校验 import PropTypes from "prop-types"

PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的。在本例中, 我们使用了 PropTypes.string。当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑，propTypes 仅在开发模式下进行检查。

根据父组件向子组件传递的数据，及类型进行校验

return( <XiaojiejieItem content={item} index={index} key = {index+item} // 传递删除的方法给子组件 deletItem = {this.deletItem.bind(this)} //把 数组 数据传递给子组件，单向数据流 传递过去只能使用不能修改 list = {this.state.list} // avname="小刘" /> )

子组件内进行校验

// 注意校验的时候要写在 类的外面 xiaojiejieItem.PorpTypes={ index:PropTypes.func, //这里传过来的是数字改成方法 也不报错 avname:PropTypes.string.isRequired, //isRequired 必须传参 content:PropTypes.string, deletItem:PropTypes.func //校验方法 }

必传值的校验

比如现在我们加入一个avname的属性，并放入JSX中，就算不传递这个值也不会报错的

render() { return ( // 点击事件 this.props.content 子接 <li onClick = {this.handleClick}> {this.props.avname}--为你服务 : {this.props.content} </li> ); }

如果 在校验的时候加上关键字isRequired，这事 父组件如果不传过来参数，这里就会报错，我们就需要在父组件里进行传参 或者 在子组件中使用defalutProps 默认值

//若父组件 不传值这里写成默认的 xiaojiejieItem.defaultProps = { avname:"小庄" }

注意官网还有很多校验其他数据类型的方法，这里不一一举例 https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper