你用过 PropTypes 的这些类型检查么?

1,531 阅读1分钟
你用过 PropTypes 的这些类型检查么?

从React15.5起,React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。


为什使用prop-types

在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。


01

首先你需要通过在终端npm install prop-types安装一个叫prop-types的第三方包

02


然后通过下面的写法对你的某一个组件的道具中的变量进行类型检测


image.png


03

prop-types提供了大量的验证器


image.png


要在组件中进行类型检测,你可以负值propTypes属性,

ES7中使用:


image.png


  • 使用isRequired设置属性为必须传递的值

image.png

  • shape检测不同对象的不同属性的不同数据类

image.png

  • arrOf和objectOf多重嵌套类型检测

image.png