00:00
好了各位啊,我们继续,大家呢,不要急,等我们写完了todo这个案例之后啊,会给大家整体总结一下这里边需要注意的一些点啊,以及一些坑,是吧,我们还没写完呢,慢慢来,同学来做一个小事情啊,这什么组件呀,APP组件,咱就瞄紧一个人看吧,你给没给list传东西,你就说你传了还是没传吧,是不是传了啊,传的是什么呀?Pros,那我问一下你有对传递的props进行类型以及必要性的限制吗?没有吧,哎,所以说接下来呢,我们限制一下,限制谁呢?先从list入手,或者从hier入手也行,反正我给hier和list都传东西了是不是?哎,那我就限制一下吧,来到hier组件里边,同学怎么对传递的标签属性进行类型以及必要性的限制了呀?还记得吗?首先你得借助一个库,那个库叫什么名字来着,叫做prop types,对吧?
01:02
哎,说老师那第一步,第一步当然是引入这个库呀,走port啊引入,那那个引入之后的名字是不是最好叫这个proper大写的pro type,对吧,咱之前呢,在HTML里面讲的时候可说过这个问题啊,Pro那从哪引入呢?说老师relax是不是帮我下载好那个库了呀,没有有这个库,但是react没有帮你下载好,就是react脚手架啊,因为他不知道你限不限制,很多人都不限制,所以说他就没帮你下载,那就自己动手来样ad prop type41定要加点S啊prop type那是另外一个库,咱这叫pro type4走安装上也比较小啊,也比较快。嗯,你看这玩意儿它不能吹是吧,同学们一吹你看它就慢了,是再稍微等一会儿啊。好嘞,安装完了啊,那就引入呗,Pop tap斯。
02:01
那咋限制了呀,还记不记得了呀啊慢慢来,同学是不是得用static关键字,哎,然后你加那属性是小写的prop type4完等于一个对象对吧?那接下来限制吧,APP给hier传啥了呀,传了一个I的todo,而且I的todo是不是一个函数,那所以说写呗I todo,那接下来呢?啊,是不是这么写呀,Pros第2FUNC代表函数。啊,然后a required代表B传是吧,所以说给大家写好注释叫做对啊也可以说接收,因为你站在hier的角度就是接收,你站在APP的角度就是传递,对不对,对接收的props进行进行什么呀,类型以及必要性的,诶限制好了,那同学你说是不是还得把这堆东西复制啊,然后再交给哪儿呢?List,因为APP是不是也给list传东西了。
03:08
Todos是个数组,Update todo又是一个函数,所以说回到这个里边,那么在这儿回撤写过来对吧?哎,加上,但是你忘了引入是吧,那所以说引入一下,我把刚才那句话呢,直接粘过来得了,就是这个复制放在这。那这里边你可得改一改啊,人家接收的可不叫at todo,回到APP里边,人家接收的是两个,一个叫做todos,而且todos呢,它不是函数,它是一个数组,A22啊数组,然后点A字required好了再走,他又接到另外一个人,叫做update todo,对不对?哎,Update todo,那这个update todo呢,它可就是函数了,那所以说func.is required,好。是吧,哎,那这回呢,就做好限制了,来回头看一下吧,啊刷新一下,如果你传的没毛病啊,他肯定,诶这就不给你报错,那来咱们给它改成有毛病的APP,你比如说我把update todo呢,我给你传成一保存,回头虽然也能出效果,但是这明确的告诉你了,这个update todo,我期待得到一个function函数,但是我却得到了一个number,你看。
04:22
就把这个问题呢,哎,提前就给你报出这个警告了,OK,哎扯回来扯回来好走,那这样我们整体扫一圈,把该加的注释呢给大家加上啊,APP打开看看有没有什么需要加注释的东西,因为再写下去同学代码就有点多了啊,我怕大家乱打开爱的todo啊,这每一步咱都写好了,那打开这个呢,嗯,也都写好了是吧?好了,那再打开foot特还没写过呢是吧,还点打开看里边有什么呢啊哎,这个注释没加上呢,对不对,哎叫做什么呀,键盘事件的毁掉啊那这里边判断,哎这些都写好了是吧?来再往下,这也没什么啊,那咱再看看这个list是吧,List里边呢,这是做限制对吧?这是接收到东西,这就不写了啊,那肯定是父亲给他传东西嘛,啊,有的是自己用,你比如说todos就是自己用,但是有的呢,它还得继续往下传,那我们再打开item再搂一眼啊,Item里边的鼠标一入一出的回调对不对,哎,这是这回调啊,行啊,那基本上能加的。
05:22
呢,咱也就都加上了好吧,哎,那这一小节呢,停,我们做了一个事儿,什么事呢?对传递的props进行类型以及必要性的限制,好了这一小节停。
我来说两句