![1971410d3d6f9445c30f0c4406cb0ad1.png](https://i-blog.csdnimg.cn/blog_migrate/92a651f8a5f18ae444342299841ea28a.jpeg)
在父组件向子组件传递数据时,使用了属性的方式,也就是props,但“小姐姐服务菜单”的案例并没有任何的限制。这在工作中时完全不允许的,因为大型项目,如果你不校验,后期会变的异常混乱,业务逻辑也没办法保证。
PropTypes的简单应用
我们在Xiaojiejie.js
组件里传递了4个值,有字符串,有数字,有方法,这些都是可以使用PropTypes
限制的。在使用需要先引入PropTypes
。
![1193100f5479be55f1767d562b168661.png](https://i-blog.csdnimg.cn/blog_migrate/8ab86c2dbfa0d63d84ae8adc5d027e33.png)
引入后,就可以在组件的下方进行引用了,需要注意的是子组件的最下面(不是类里边),写入下面的代码:
![d777f53e00a5dbeef8231d5ec79614a6.png](https://i-blog.csdnimg.cn/blog_migrate/b657928902172c6b56921facd37ac019.png)
注:这时候你在浏览器中查看效果,是什么都看不出来的,你需要修改一个错误的校验。比如我们把index改为必须是字符串。
![184020f9492c4ec25c2e6307370e5445.png](https://i-blog.csdnimg.cn/blog_migrate/80f59c08cb7f50cc294fa9cb69fd3002.png)
时候浏览器的console
里就会报错了,报错信息如下:
![87a6b12ce84c679a2054bdbbed62d1fa.png](https://i-blog.csdnimg.cn/blog_migrate/863216cd9975f552d870e396f66b00f5.png)
意思就是要求传递字符串,而我们却传递了数字过去,所以给了警告。
### 必传值的校验
比如现在我们加入一个avname
的属性,并放入JSX
中,就算不传递这个值也不会报错的。代码如下:
![f8c6e7d420e375d2c162676a9edc7f61.png](https://i-blog.csdnimg.cn/blog_migrate/4f2ce19d4352b4faf379b00c1fdd4b3b.png)
这时候代码是不会报错的,我们传不传无所谓。比如我们现在传一个属性过来。
![9ba97757cb32f80b392f1012b3361db7.png](https://i-blog.csdnimg.cn/blog_migrate/5185c019ad2aad2f52e3d98f6487abcf.png)
这时候页面显示正常了,但是怎样避免必须传递avname这个属性值?如果不传递就报错,这就需要使用isRequired
关键字了,它表示必须进行传递,如果不传递就报错。
使用默认值defaultProps
有些人是非常腼腆的,他是不好意思选择的,所以有时候是需要有一个默认的人为她服务的。defalutProps
就可以实现默认值的功能,比如现在把avname
的默认值设置成"松岛枫" ,然后把avname
的属性删除掉。
![936249a9ddac55731bd9b90db8d22955.png](https://i-blog.csdnimg.cn/blog_migrate/e923ffe66cb4b5d8a7a670ec91cc74d3.png)
其实检测的类型非常多,你最好去官方文档看一下,能得到比较全面的了解。下面的课程有用到特殊的类型,还会继续给小伙伴们讲解