00:00
好了各位,我们继续呢学习pros,那刚刚呢,你已经学会了这种批量传递的形式,对吧?老刘的信息准备好通过这种形式批量的,哎,都给它带过去,我们管这种形式啊,同学们叫做批量的传递pros。其实还有另外一个叫法啊,叫批量的传递标签属性。说老师这怎么理解呀,那你觉不觉得什么名字呀,年龄啊,性别呀,其实都是person这个组件标签的标签属性对吗?哎,所以说呀,同学以后咱说传递props和传递标签属性那都是一个意思,其实本身这个单词prop就有属性的意思,那props呢,就是多组属性呗,好,那我们看一下啊,这个案例呢,目前长这个样子,打开页面。三个人的信息控制台有输出,我想把这些无关的输出呢给你去掉,回到代码当中,这儿呢住掉。这儿呢,住掉好了,回头,哎,就这样子,接下来呢,我说一个小需求,我想让每一个人的年龄在展示的时候都比他的真实年龄大一岁,也就是说Jerry的真实年龄我不去改,他就是19,但是我展示的时候就想加一岁,展示成20,那同理,TOM18啊,展示的就是19,老刘真实18展示的就是19。
01:17
那怎么做呀?回到代码当中,老师我知道了,把这呢改成20,你这么一改,就是把Jerry的真实年龄改了,我的意思是传的还是19,也就是你的真实年龄没变还是19,只不过做展示的时候我加了一岁,那你觉不觉得那个加一写在这儿就解决问题了呀?来,那我们看一下效果,走,哎哟喂,不对了,十九变成了191,十八变成了181。同学,你不能说他没加,他加了,但是做的好像是字符串的拼接。是吧,往下看,老刘是对的,18加了一帧是19,那为什么这儿是正常的,这就不行呢?回到代码当中走,看这吧,你当年传递过去的19和18呀,都是带引号的,那引号里边的东西啥意思呀?诶,是字符串,老刘这个为什么对呢?因为人家直接写了一个number类型的18,没加引号,如果说你好奇,你把老刘这十八一旦加上引号来,你注意看18回来,老刘这也不对了,那所以说你知道应该怎么改了吧,老师明白了,都得改成老刘那种形式number类型的年龄啊,行,那你改吧,老师,那我就把引号删掉,同学是不是以为我把引号删掉,我传的这个19就是number类型的19了呀?
02:36
不是的。你这么一删呢,语法就错了,因为人家的要求是K等于Y6这种形式,老师我这也是啊,K等于Y6就是在你Y6这出问题了,你这么写你这19就什么也不是。老师,那为什么我写成引号它就对呢?你写成引号,人家认为A,你传了一个A值,A的值是字符串的19,老师,那你就告诉我,我想传递一个数值的19,一个number类型的19,我得怎么写呢?
03:06
你注意刚才我说的话,我说我想传一个什么,是不是number类型的19啊,同学,是不是只有在GS的世界里边,咱们才能提数据类型啊,然后才涉及到数据类型的判断,那所以说同学你这19这么写,人家不认为是GS里的东西,你得这么写19,哎,那同理呢,这就得这么写18好了,回头哎,东西就对了,老师这不就改完了吗?呃,是改完了。你这之所以不写字符串的19和18,是因为person组件是你自己定义的,你自己门清,知道里边要加一,你就不敢写字符串,那我想问一下,如果是别人用你这个组件的。人家不知道你这里边要加一呀,那所以说很有可能人家就真写了个18,那你这样的话肯定就不对了,你可能还抬杠哈,老师,那他能看呀,年龄哪有181的,肯定你写错了吗?他就知道了,这得写成一个,诶说这个这个number类型的这个18,那我想问你啊。
04:08
如果不这么直接呢?如果是一次单据报销的金额呢?那19和181那可差不少,对吗?而且也不能说,哎,一眼就看出来,哎,金额怎么这么少呢?同学,报销的金额就不能是19吗?所以说一句话,你这么写组件容易让别人犯错误。别人用你组件的时候,并不知道这些标签属性都应该是什么类型,所以说你觉不觉得你需要对这个组件传递的标签属性进行类型的限制?同样是18,不能传这种18,得传这种18对吗?你不觉得这是对标签属性类型的一种限制吗?好,那我这儿呢,先错着写,我就写18,好,再考虑另外一个问题,我不传性别会怎样?Jerry的性别没了,你敢不传,那人家就敢不展示没东西吗?是吧?
05:06
但是现在我有一个小需求,就是如果一个人的性别不传,那我也给你一个默认的性别,比如说是男或者是女都可以,对吧,你不是没传性别吗?好,我给你分配一个男,哎,也就是说有些标签属性你不传,我也会给你一个默认值,你比如说性别好了再分析,同学你说如果一个人的名字不传会怎样呢?走。同学,如果说我没有性别,我没有年龄哈,后期呢,我能把这些属性我给他补上对不对?你不是没有吗?那我再给你加进去,但是你觉不觉得同学如果性名都没有,你就压根不知道这人是谁,这条数据也没有任何存在的意义,对吗?我都不知道你是谁,所以说你觉不觉得同学们名字这种标签属性是不可或缺的,必须得传。所以说你面临三个问题,同学,第一个对传递的标签属性进行类型的限制,第二个就是进行必要性的限制,名字必须得传,还有就是给某一个属性,你比如说性别指定默认值,哎,那我们如何去做这些事情呢?我们来复制一份啊,把它改个名字,嗯,React里边呢,有给我们提供这种方式,对吧,不可能让你随便的传呀,这块呢,就叫做对props进行限制,好那来吧,同学,我先把这儿呢都给它改成正常的,也这呢你得正常传IG18好了吧,哎,这标准呢,我不在这破坏它,然后这个性别呢,我也传进去啊来走他是呢,男士男好留着这个我在这里边呢,给你进行一番限制啊来,我还是呢,先写成标准的啊,一切都是标准的,走难这18呢,也写成标准的走,哎,该传的我是不是都传了,右键打开。
06:56
控制台也打开好,那如何限制呢?是不是要对组件实例对象?
07:03
Pros里的东西进行限制,也就是说你这传递的东西进行限制对吗?哎,那同学我再问你组建实例对象是由谁扭出来的呀?是不是你所定义的组件呀?你定义的是一个组件,哎,Person组件,你每写一个person组件标签react都能帮你拗出来一个组件实例,而在组件实例身上的pros属性里边,诶,就囊括着你所有传进去的东西。所以说同学你跟一个人对话是最好使的,你跟缔造实力的人去说话,你不是专门缔造实力的吗?那你缔造这个实例的时候,你就帮我把规则给它加上好,那怎么写呢?来,同学,我接下来呢,写一段伪代码,如果这东西啊让咱们设计,可能你会写出这种代码,Person大写的person是什么呀?哎,组件第二叫做属性规则等于哎一个对象。
08:03
对吧,同学你要跟他对话嘛,你得告诉他一点信息嘛,那所以说哎,就是给他来一个点属性规则啊,那怎么写呢,你比如说名字写上啊,名字咱什么要求啊,其实你可以看一下课件在这儿呢,名字的要求是必须指定你不能不传,而且不能瞎传,传的必须是字符串,至于说性别和年龄啊,我只要求你呢,得是字符串类型。啊,你传可以啊,你传字符串类型说我要不传呢,我给你一个默认男年龄,不传呢,我给你一个默认18。哎,好了,回到这儿,那写吧,名字怎么的B传啊,然后什么类型啊字符串,你可以按照这种形式把age还有性别这个sex都给它进行限制,但是你这么写毕竟是一个伪代码,哎,所以说react要求就是你给组件自身添加一个属性。
09:02
这个属性的名可不叫属性规则,人家要求的是你得写出这个东西叫做prop同学,Prop啥意思?是不是有属性的意思?那么类型呢?种类呢,Types。你给person加上pro type这个属性,你在里边再写上具体的规则,React就能帮你限制了,你只负责用这种形式去写,人家就直接能帮你限制了这个属性的名字不允许改react底层再找这个东西。React每一次去帮你new组建实例对象的时候,都去问一下,说哥们,你身上有没有一个属性叫做pro types,你说没有,React说好,我也不帮你限制了,你都没这属性,如果有react react说那你把具体的规则给我,那来吧,名字的限制,但是当然不这么写,那怎么写呢?这么写来,同学看着啊,Rest react点。他身上呢,有一个属性,注意啊,这个属性跟这个人长得真的是太像了。
10:06
这叫做pro type,而react身上有一个内置的对象,叫做prop types,都叫types,一定不要搞混了,这个P是小写的,这个P是大写的,这个pro types是react里边一个规矩,你只要敢给类自身加上这个属性,我就认为你在加规则。那么具体的规则呢,你得去这个里边去寻找,React里边有一个内置的属性是大写的pro type啊,第二你想让这个name是什么类型呢?String,那就写一个小写的string,注意啊,String是小写的,咱们说那数据类型的S一般是大写的,对吧?在这诶小写的好,那你这么一写不要紧,同学你的name,而你的这个名字就被限制了,你只能写什么类型呢?字符串类型。
11:02
啊,说老师那我试试吧,来到页面当中,你注意观察,同学,他报错了。啊,你读一下他说什么呢?不能够读取string在谁身上,Underde find,所以说一定是点string点的左侧出问题了,点string点的,诶是不是这个呀,也就是说这个东西应该是什么呢?Unde find,所以他才会报这个错误,说我说那你这写的不对呀,你这你看你还告诉我react里边有个内置的对象叫做pro types啊,然后点string就能限制了它是string类型,那怎么报错了呢?说一下啊同学在react15.x的时候,就是15版本的时候,React身上一直在维护这个人啊,都有,但是在react的16版本之后,这种形式就被弃用了。为什么弃用了呢?因为react发现哈,如果一直在这个最为核心的react对象身上加着这个属性,就会导致react这个核心对象呢会很大,而且有些时候呢,人们也不一定非得进行一些限制,就有的时候可能你传吧,你随便传,那有没有一种感觉这个东西直接挂在react身上不太合适,因为有的时候我并不需要,那到了REACT16版本的时候,你要注意他已经不从这儿取了,它已经不从react身上取了,说老师那这个东西那我怎么用呢?
12:34
老师是不是直接写呀,不是你直接写肯定报错,说这个东西根本就没有定义,说老师那我从哪儿去取它呢,在这呢。给了大家这个依赖包是吧?打开全家桶,找到依赖包,找到旧版本同学,瞧,诶,Pro types这个库在这儿呢,这个库就是专门用于对标签属性进行限制的,你需要做的是摁住它,来到代码里边,找到GS的这个依赖包,松手把它弄进去,来把它关掉,那接下来呢,就得需要你去引入它,滑到最上方来走着叫做引入。
13:15
谁呢?Prop types为什么要引入它呀?用于对组件标签属性进行限制好。那就引入吧,翻出去GS下的pro同学引入了这个东西,全局就多了一个对象,叫做react,引入这个东西呢,全局也多了一个对象啊,叫做react DOM,哎,那同学我跟你讲啊,如果你引入了它,那么全局就多了一个对象,一定要注意,那个对象就是prop types。注意啊,这个P可是大写的,哎,所以说同学你一引入它不要紧,这个人就不会再报错了,全局都有他了,好了,保存回头瞧效果啊。
14:12
说老师那你首先东西是不是正常展示了,老师他也没给我警告什么的呀,说我这名字不对了,那是因为名字你传的都合理,来名字字符串,名字字符串,你这名字字符串,如果说你这么写一下啊,同学来你注意看我改老刘吧,我把老刘的名字呢改成。一个数字,你比如说是100,同学,这就不对了,名字怎么能是一个数字呢?你保存回头看同学他说啥,他说我希望啊,这个名字这个属性呢,是一个字符串,你看我期待的是一个字符串,但是我却得到了一个什么呢?Number说老师,但是页面不也显示东西吗?显示是显示,它肯定会保证页面的正常显示,但是在这儿呢,会给你一个警告,你看这多好呀,哎,防止别人犯错误,那在这儿走写上啊,叫做老刘,你只要传的对,他不会给你任何警告的。
15:08
但是同学你这么限制还不够,你比如说这个Jerry啊,我不写,我是不是压根就没传name呀,不是说name的值合不合理,我压根就没传name,那你瞧一下这就不对,咱说最起码你得给我一个提示,说名字必须传是吧,那怎么能表达名字必须传呢?哎,他用这个单词点is required,就代表它是必须传的,Jerry我就没传,那你回头看是你不传我就不展示,但是我会给你一个警告,他说名字被标记为,同学把这单词呢,你记一下record这啥意思呢?这个单词啊,打开有道咱查一下啊,其实本身它就有这个必须必填项的意思,你看必须的啊,要求的必须的好了,来有道呢,给他推一下啊,已经推了啊,所以说你看名字被标记为必填项,但是我却得到了一个安found,你没传就是安found,那所以说就不对了呗,怎么办呢,这就得传呢,写好了name等于来写吧。
16:09
叫谁了?J y Jerry,好了,同学,那你看对于名字的限制诶,是不是就都写好了呢?啊,所以说这种形式啊,你得要习惯,OK同学,这就是人家的一个语法规则对吧?啊,注意这个P是小写的,这个P呢是大写的,来吧,继续吧,同学,我们的规则是名字我已经限制好了,必须指定,而且呢得是字符串来说说性别呢,首先你得是字符串类型,可不可以不填呀,可以,你要不填我就给你个默认值是吧?那来吧,写着回到代码当中,除了限制名字,还得串限制什么性别对吧?啊,咱说的是来叫做性别得是字符串类型,所以说要是字符串了,还得这么写pro.string但是不要加这个了,因为我的性别是可以不传的,对吗?好保存。他说老师我看一下啊,如果我把这个性别删掉走。
17:03
你看性别确实没了,哎,但是呢,他也没有报错,但是有一个功能你没实现,就是你不传人家是不是要有一个默认值啊,哎,那默认值怎么设置呢?来同学还得是跟person对话,走person点你给类本身啊,加上这么一个属性叫做default default啥意思?默认的pros default pros就是默认值,如果你不传,我就给你一个默认值,咱开玩笑的写啊,比如说你不给我传性别,你不说你是男是女对吗?那就不男不女。好,那你注意看啊,Jerry呢,我是没有传性别的,那么Jerry就变成了A,不男不女是吧?哎,这就是指定默认值,好了,那再来还有谁呢?年龄,年龄这回可就不是string了,是什么呢?Number I number类型的年龄是必填的吗?不是,好,那我试一下啊,如果这位年龄不行,那你看一下呗。
18:06
哎呀,同学有问题了,为什么变成了na呢?同学,你想一下,你是不是没有传年龄,你要是没有传,这拿到的是不是unde find unde find参加数学运算,那你说是不是就变成了na呢?那所以说赶紧的吧,同学,如果你的年龄不传,我就给你一个年龄,比如说18岁,好的保存回头这回敲,嗯,加个一变成19了,对吗?哎,好了,这就是对标签属性进行类型标性以及默认值的限制。好啊,那这写好了注释啊,叫做对标签属性进行类型啊必要性啊啊的限制,那这呢,就是指定默认的标签属性值,好哎,那我们就简单的哎完成了,那这呢,多说一句,同学,如果说呢,我想给人传一个方法呢,比如说人有名字,人有性别,人是不是还能说话呀。
19:13
啊,那我给大家举个例子啊,呃,那你比如说呢,我写这啊方式啊,临时写一下方式speak speak是不是说话呀,嗯,我就简单说啊,在这就是colo叫做我呀说话了,诶我说话了。好,那同学我想把说话这个方法呀传给人,那你说你是不是得进行一番限制啊,你当然可以说选择不限制,同学,限制这件事不是必须的,如果写的好一点就应该限制,对吗?你比如说同学我想给Jerry啊,传一个说话的方法speak等于是不是得读出来呀,读谁呢?下边那speak传没传给?Person这个传了,那也就是说给谁的是给Jerry的对吧?好了,那看一下走,其实也能传进去,但是同学你有对speak进行限制吗?没有,你没有对speak进行限制。
20:07
那说老师我想限制一下,走呗,得传一个speak,它的值不是不是string,是不是一个函数啊,你可能就会想到这儿了,老师,Function。那你看一下啊,来走你看啊,他咋说的,他说这个speak呀,必须是一个函数,但是在这个里边呢,哎,我却收到了一个under find,说老师这什么意思呢,我说一下是你这个单词啊,你写的不对。你比如说啊,同学举个例子,我不传speak,我这也不限制speak,我说你的类型必须是NUMBER2,有这类型吗?没有,那你看一下效果,他就告诉你说不对呀,哥们,按照你这个规则说,必须得是NUMBER2这个类型,我从pro types上去取NUMBER2,我取不出来呀,我取得的是一个and find呀,我这没法给你限制了呀。哎,所以说同学是你的单词写错了,但是你可能会说老师我也没写错呀,来这补上speak,等于老师没写错呀,函数不就这么拼的吗?Function。
21:16
同学是这样的,你的string,你的number都把首字母呢改成小写了,所以说呢,不会跟它里边内置的那个string对象啊,啊内置的那个对象啊是吧,产生冲突,因为你改成小写的了,但是你的function可不行。同学,你的function呢,是个关键字啊,是定义函数的关键字呀,哎,所以说这呢,值得你注意的是,人家这个里边如果说限制传的必须是函数,不写function,那写什么呢?写fun。I就写到这儿保存,那这时候你看。就没问题了,如果你不符合规矩,你给人家传的speak呢,是一个字符串一,人家肯定就会告诉你,哥们儿,我期待得到的是一个函数,但你却给了我一个字符串,OK,哎,所以说这呢是值得大家注意的啊,那这呢,注释给大家补上啊,写好了叫做限制内幕B传,且为字符串。
22:20
那把这个复制走走走,那这就是限制性别没说B传为字符串,那同理,这会儿也得改走,因为这些人都不是必须传的吧,要是必须的你就加上这个叫做A字require啊,那把这个age呢拿走,嗯,不是字符串了,为数值,那这儿呢,限制speak为函数啊,那这呢也给大家补充注释。叫做啊sex啊,这个性别默认指为咱也别说不男不女了,不太好听是吧,哎来个男男,那这儿呢复制是吧,年龄哎默认值呢为18,你就完成了对标签属性进行这些限制,OK好了,我们呢,这一小节停一下。
我来说两句