利用prop-types第三方库对组件的道具中的变量进行类型检测 - 行业资讯

<强> 1。引言,JavaScript就是一个熊孩子

1.1对于js们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java这些“好孩子”那样循规蹈矩。因此给我们带来许多烦恼

& lt; 1祝辞运行时候控制台报错:未捕获错误,这尤其令人恼火的是系统告诉我们有错误但是又不告诉我们错误发生在哪里。试想一下,你到一个地方旅游迷了路,一个当地的熊孩子一直笑嘻嘻地跟在你后头告诉你:“你走错啦!”。但是不告诉你应该怎么走,你会不会很想揍他一顿?(╬￣皿￣)

& lt; 2祝辞运行时报了确定的错误,然而我们发现这TM完全是一条驴唇不对马嘴的错误报告,甚至于去stackoverflow上寻找答案,却发现提问的错误场景跟自己的根本是两码事。让我们回到1中场景,假如这个熊孩子很好心地告诉了你路线,结果你走到天黑发现被熊孩子狠狠得耍了,导致你不得不在大晚上露宿街头,你会不会比1中场景更想揍他一顿?(╬￣皿￣),

& lt; 3在你主观地写错了了一个变量的类型,比如把字符串1写成数字1,但是系统”很好心”地不报错误提示。(我们都不需要特别的进行类型声明当然不会报告错误提示啦),而这却可能就是你接下来错误的源头。让我们回到1、2中场景,假如这个熊孩子知道你这个外地人绝逼是走错路了,但当你问路:“我走对路了吗?”的时候,他笑靥如花满面春风得点点头,让你充满信心充满希望得一条路走到黑。我想你此时的心情不会比1和2中的要好(╬￣皿￣)

& lt; 2祝辞中情况有时候比较难以避免

& lt; 1祝辞中情况我们可以通过熟悉主要的6种未捕获错误的情形加以判断。(在下一篇文章里我会讨论这个问题)

& lt; 3祝辞中的情况呢,完全可以用类型检测的方式加以避免,这也就是我这篇文章所讲到的内容

<强>本节主要讨论的是与反应配套的类型检测库——prop-types的运用
　　

今天我在这篇文章里面介绍的内容,就是通过反应的proptype进行类型检测,。顾名思义prop-types就是对反应组件中道具对象中的变量进行类型检测的,因为道具是反应数据流的管道,我们通过prop-types就可以轻松监控反应里大多数据的变量类型先介绍下proptype的基本用法。

<强> 2. prop-types基础入门

　　　　　　yourComponent。proptype={ 　　属性1:属性1的变量类型, 　　属性2:属性2的变量类型//? 　　} 　　　　

<强> 3. proptype的使用全解

<强>

　　　　　　从“反应”进口的反应　　类的儿子延伸React.Component { 　　呈现(){ 　　返回(& lt; div风格={{填充:30}}比; 　　{this.props.number} 　　& lt; br/比; 　　{this.props.array} 　　& lt; br/比; 　　{this.props.boolean.toString ()} 　　& lt;/div>) 　　} 　　} 　　类的父亲延伸React.Component { 　　呈现(){ 　　返回(& lt;儿子　　数量={' 1 '} 　　数组={(1、2、3)的} 　　布尔={“真实”}/在) 　　} 　　} 　　　　

比如这个例子,我们通过道具从父组件向子组件传递属性,你原本试图通过号码,数组和布尔这三个属性分别向儿子中传递一个数字,数组和一个布尔型数值,但由于你过度疲惫,把它们都写成了字符串,虽然渲染是正常的,但这可能会导致你接下来调用一些方法的时候发生错误,而系统并不提供任何提示。

利用prop-types第三方库对组件的道具中的变量进行类型检测

让我们给它加上proptype的类型检测:

　　　　　　从“反应”进口的反应　　从“进口proptype prop-types '; 　　类的儿子延伸React.Component { 　　呈现(){ 　　返回(& lt; div风格={{填充:30}}比; 　　{this.props.number} 　　& lt; br/比; 　　{this.props.array} 　　& lt; br/比; 　　{this.props.boolean.toString ()} 　　& lt;/div>) 　　} 　　} 　　的儿子。proptype={ 　　数量:PropTypes.number, 　　数组:PropTypes.array, 　　布尔:PropTypes.bool 　　} 　　类的父亲延伸React.Component { 　　呈现(){ 　　返回(& lt;儿子　　数量={' 1 '} 　　数组={(1、2、3)的} 　　布尔={“真实”}/在) 　　} 　　}