00:00
好了各位,我们再讲下一个扩展点啊,叫render props,还是老套路,先不看这些东西,用案例呢,把东西给大家引出来,回到我们的代码当中啊,第六个呢,就关掉了啊,新建一个第七个啊,咱们要讲的呢是render props。好,新建一个组件,好rcc啊,准备出来rcc好,名字呢,改一下啊,叫做parent。嗯,跟之前那个套路差不多哈,首先呢,在这儿来一个H3标题,叫做我是呢parent组件,那我还是需要一些样式,那就这样吧,同学,我把刚才的那个样式拿过来,要不一遍一遍写,太耽误时间了啊,那parent,那这个呢,叫做child,不叫child了啊,叫做A,好,那这个呢,再给它复制一下啊,叫做啊B,呃,颜色改一下各位,叫天蓝色好。
01:08
三个样式准备好了,然后呢,打开这儿呢,就得引入import当前目录下的index.css。这是parent组件,你一听就明白了,这应该是负组件走,这个组件叫什么?叫A组件?哎,那这写上我是A组件,那再来一个这叫做B,那当然说的就得是我是B组件,好了各位啊,三个组件我都给你准备好了,然后呢,给它们上样式啊,第一个class name等于parent。把这一堆呢拿回来走,这叫A。这个呢叫B。好。啊,AB都准备好了,但是A和B呀,你发现各位它是不是暗色的呀。那什么意思呢,就是我没有用他们对不对,好,那同学我用一下A啊,你看我是怎么用A的,好,A是不是用了,请你告诉我各位parent和A是啥关系。
02:12
是父子吧?好,那我再用一下B,我让你看看,请你告诉我B和A是啥关系?B和A是啥关系?是不是父子?哎,OK,好,折叠折叠,这也折叠,组件准备好了,回到APP里边,不要再引入第六个了,是我们的第七个。七。好,重新打开一个页面,我们去看看效果啊,这跟你想的一样是吧,各位,哎,Parent里边是AA,里边是B,好了,AB什么关系啊,父子,Parent和A什么关系啊,父子,好,打开我们的代码,关掉APP,我开始给大家提要求了啊。同学,比如说呢,呃,我parent呀,想传给A点东西,那怎么传呀。
03:04
其实很简单,A等于一,或者不写A100啊,写X等于100是不是传了呀?OK,同学你说这是不是属于父子之间传东西啊,嗯,好的,那这我就不接了,同学你接肯定能接到的是吧,好。那接下来呢,你瞧一个事情啊,各位你瞧一下啊,我怎么的呢,我这样做啊,你看啊,你捋顺一下,这是parent里边用到了AA里边是不是用到了B啊同学们你注意看,现在呢,我把B删了去。同学,我问一下B是不是这个B组件是不是没用啊,啊,那没有用到,我先把它注掉,一会儿我再把它解开,B其实是有用的啊,我提前准备好来。同学,你说现在页面什么样,你想一下就看一下这些代码,你想象一下啊,然后我打开页面看,跟你想的一不一样。是不是这样的呀,好。你看呢,接下来呢,我把A组件的换个写法,注意看了我们之前啊,写这个组件标签的时候,各位是不是都是自闭合的呀?啊同学我问你这个标签闭没闭合,闭合的自闭合的,那么你这H3呢。
04:11
啊,老师H3啊,对,我知道他也闭合了,只不过是有开始标签和结束标签这种闭合对吧?好,A组件我这么用,请你猜猜页面上显示什么,不要猜这个B,各位B,因为我已经住掉了,而且我都没用,请你猜猜页面上能展示啥啊,其实我想问你的是啊,更更准确点就是页面上能不能展示那个hello,能不能。想想想想再说啊,能不能展示这个,Hello。好了,你想的也差不多了哈,来,回到页面看效果啊,来走,刷新刷新刷新,请问hello,为什么消失了?我写了呀。那你看着我要不写组件标签,我写H4,注意啊,我写H4,我写hello,你说有没有,这必须有。
05:07
刷新。是不是有好?那我想问的是,为什么写H4啊,就有标签体内容能展示,那么组建标签的标签体就不能展示呢?同学,是不是可以管红色框里的东西叫做标签体呀,对不?那我问你上边那行代码H3的标签体是啥呀?标签体内容请问是什么?是不是这玩意儿,那我现在就想问这个哈,他去哪儿了呢?如果在讲陆游的时候,我在讲那个封装navylink的时候,如果各位仔细听了,其实你知道这个hello,它藏在哪儿了。来刷新,现在没有就对了,藏在哪儿了呀,这哈啊嗯,藏在哪儿了,藏在这儿了,各位你想把那hello展示出来呀,那这样说吧,我在A里边输出一下props,你就比谁都明白了,刷新一波。
06:02
想没想起来标签体内容是一个特殊的标签属性,属性名叫children,对吗?所以说你想让A组件这里边真能展示出,Hello,那你需要是这样做,各位。A,组件是不是在这儿呢?啊,那你传没传递标签体内容传递了,那你告诉我这怎么写吧。z.upta啥呀,是不是children呢?保存刷新,看一下效果来东西是不是出现了,所以说这儿你必须得明白,咱才能接下来往下讲那个render props。啊,体会体会。说老师,那我是不是可以这样总结呢?如果是跟HTML匹配的这种标签啊,标签体内容是直接就能渲染的,对,那如果是组件标签啊,它的标签体内容呢,我得在组件里边通过this property children去拿到,对,就这意思。好,这块如果你懂了,你懂了啊,我再给你进阶一下看着啊各位这我不写props不写啊。
07:08
B组件我打开。好了啊,B组件是不是出现了呀。来,走。这里不写哈,回车。这里写B,请问页面能做什么展示呢?想想。同学,A组件肯定能展示,对不对?嗯,我想问的是B组件能不能出现在页面上呢?这个B组件呀,能不能呢?能还是不能啊。同学,现在就挺特殊的了,你说我第十行是不是在指定A组件的标签体内容?对吧,是标签题内容对吗?好。那么是标签体内容,那我想问各位的是,你说你是不是写了B这个标签啊,B这个组件标签啊。那你说B能不能出现到页面上呢?
08:00
看效果刷新。是没有的对吗?为什么呀。那说老师我知道了,就是B组件压根就没有渲染呗,没有调render呗,不是的,Colo你输出B,你看控制台有没有东西就得了刷新。啊哎,说老师没有啊,没有B,哎,那我明白了,老师,那你这就解释通了呀,那你看老师B连runner都没掉,那所以说呢,哎,那B那他就没出来呗,那我想它出来怎么办呀。我想让他出来。嗯。走咋出来呢?同学,你就本着一个原则啊,你第十行写的啥?A组件的标签体内容啊,标签体内容你是不是得在这儿,these.pro.children是不是拿得到啊?同学问,你这么写不要紧啊,你这么一写不要紧,我问你,你用没用B,你用了,你一旦用了B,那么我告诉各位,B的render它肯定会被调用了,刚才那是不调用的,为啥呀,你没用啊。
09:05
对吧,是写标签体了,写标签我就给你渲染呀,你这都没用对吧,好,那这回呢,你刷新一波同学B的软掉没掉掉了,那我想问你B出没出现出现了。哎,所以说同学说老师你写这个例子能能能捕获到什么信息呢。我想跟你说的是。AB有两种形式,让它们形成父子。看图说话,同学,你说A和B是不是父子关系?明晃晃的,这是不是A里边是不是囊括着B对吧?各位AB是不是父子必须是好回来,我是通过什么样的办法让A和B形成父子关系的呀?首先,我是把B组件作为A的标签题内容写进来的,我是用这种方式让他俩形成的父子啊。那也就是说,同学,我不写九、十、11这三行的时候,A和B还以为他俩是兄弟呢。
10:08
同学,我问一下,这是A组件对吗?里边我用到任何B组件标签了吗?没有。这是B组件对吗?里边我用用到任何别的组件的标签了吗?是不是也没有,所以说同学你要是这么看的话,你看这你看这你觉不觉得A和B,你并不能说明白他俩到底是啥关系,很有可能是兄弟对吧。呃,然后你看了九十十一明白了,老师他俩是父子是吧?其实还有一种情况也能让他俩弄成父子,就是我们最开始写的咋的呀,嗨,A就是AA就是A,但是在A里边我写的明明白白咋的。咋的?那B就是我的一部分同学,这谁都能看明白这啥组件呀?呃,AB,这啥组件呀?啊,BA ABB啥关系呀,啊,父子。这是最简单的一个形式了,所以说你刷新你看跟刚才是一样的,对吧。
11:00
说老师那以后我肯定用这种方式。对吧,我不用你刚才那种方式啊,那是你可以自己随意的去选择,但是我想说的是。现在A呀,有一个状态,A呢有一个自己的名字叫Tom同学,A想把这个名字传给B,请问怎么传?你甚至觉得啊,我有点在开玩笑,老师啊,这不是A吗?这不是B吗?不是想给B传名字吗?我的妈呀,来,Name等于this点啊this.state.name老师这不就这不就完了吗?你还问我啊,那这我展示那就是逗号,怎么写呢?划括号this.prop点啥呀?Name老师这不就得了吗?你这啊,刷新。确实是,这就能传了,说老师呢,哎呀,多少遍了,说父亲想给儿子传点东西,父祖建给子组建传,那就。标签不就得了吗?说老师你还还问我干嘛呀,那同学我问一下。
12:03
A和B是咋形成的负子呢?A和B是怎么形成的父子?是不是把B。写在了A组件里边,实实在在B在这用到了形成的父子啊。那你考虑一个问题啊,你说。如果我想让AB通过这种形式形成负组啊,形成这个负子,你说我得怎么传呢?你这是不是不能写这玩意儿了呀?好同学,我问一下AB是不是父子?AB是不是负子是?现在不说别的B组件根本展示不了,你觉得呢,这个B压根就展示不了对不对,因为啥你这少写东西了,你刚才哈咋出来的对不对,Children好。说老师这不就写完了吗?你看吧,父组件子组件完,子组件展示,但是你不觉得子组件的东西丢了吗?
13:02
同学,我问一下这儿。你传递任何的名字了吗?没有吧,所以说你回到页面,同学,你刷新一波,它绝对没有东西。他绝对没有东西对不对,嗯,是的,那咋办呀。同学,我就想把A里的数据,A是不是有状态啊,我就想把A的数据传给B,当然了,我得这么说,你通过刚才那种形式,你把B写在A里边,是能形成父子,是通过prop传,可简单了呢。但是很多时候同学并不是像你想的那样说A和B是父子,B就一定写在这儿了,就有些时候是我们写着写着,写着写着代码发现,哎呀,A得包一下BA这种情况也是有的,来吧,传。说老师那我就传我怕什么的呢,我就给B传一个name呗,哎,那你写来走老师那我就this.state点,哎,停停停停停停,这个this是谁呀。
14:02
是他的组建实力对象吧,你跑偏了吧?你的本意是不是拿A的呀?但你发现A是不是在这儿呢呀,你这手是不是伸不到这儿啊。所以说同学是不是觉得有点写不下去了呀?哎,这才是问题,对吗?同学,我得承认,你用之前那种方式构建出来,他俩是父子,挺简单的,但是这种情况咋了,不考虑了呀,是不是开发当中也是有这种情况的呀,那那怎么办呢?来同学聊聊怎么办?看着咱们呢,可以这么办。同学,你说我的目标啊,是不是这样的,就是刚开始我并不知道A和B它俩是什么关系,对不对,因为A里边我看不到B的引用,引用,B里边也看不到A的引用,我还以为他俩是兄弟呢,对吧?然后直到我写了90 11,是不是让他俩形成父子了,你之前那种写法吧,就是人家都不用去分析,一看你的A组件里边用到了B组件的标签,那必须的,他俩是这是父亲,这是孩子,对不对?
15:10
那现在有一种感觉就是A和B的关系待定,我我我哪知道你俩啥关系,等程序员一写,发现AUV,我的妈呀,A是什么组件呀,父组件,B什么组件子组件?同学你要这么写,那我跟你讲,B还成父组件了呢,A还成子组件了呢,你说对不对呀?哎,是吧,哎,所以说他俩关系待定同学,那怎么写呢?那你看着啊,我不就是想让用A和B的时候再确定他俩是不是父子呢,那其实你也没有必要这样写。那怎么写呢?你瞧一下啊,这种写法挺特殊的,我把B啊这个标签先带走。A呢,我让它自闭合。好A,是不是自闭合呀,来找空格。啊,我写什么呢?我写这么一个属性叫render。
16:00
Render的值啊,各位你可看好了啊,你可看好了render的值啊,是一个函数,我在写这个。请问什么意思?人家说老师看不懂,没啥看不懂的。这是JS叉的分隔符,代表你要写JS表达式的,对吧?请问里边我写了个什么呀?我写了个函数,函数是不是箭头函数,对箭头函数我省略了画括号,是不是有自动return的功能,所以说同学一句话表达,你给A传递了一个标签属性值啊,名为render,值为一个函数,该函数。调用的返回值是B组件对吗?所以说那你告诉我同学在这里边,我得怎么写才能让A组件所指定的B组件陈列在这儿。怎么写呢?老师这么写就得了呗,Re,不行。不行,你这么写render,请问是不是把一个函数要展示在这个位置啊?你要的不是函数,而是函数的返回值。
17:05
好。同学,我问你看这看这你知不知道A和B是啥关系,不知道不知道,我哪知道A和B是啥关系啊,但是一看,哎哟第九行您这么用的明白了,A和B啥关系啊,附子好回头刷新,形不形成附子形成了吧,同学你要不做这件这句话啊,你看着你保存,你回到页面你再刷新。他100%没呀,对吧,诶回到代码里面,我们得做这句话对吧,好,那同学我问一下我们的目标啊,是不是把东西传给B呀。传给B什么呀?你想传给B什么老师,我想传给B名字好写着你注意了啊,我在render上方做好一个准备,我提前呀,去state里边把这个名字取好,我是不是取好了呀,来来来来来。传过去。老师,什么玩意儿没看懂,哎,是不是从状态里边获取内幕?
18:04
掉没掉,父亲传过来的render,掉没掉,掉了传没传参数传了传的啥name?那你调的那个是不是就这函数啊,嗯,你调的是不是这函数。对不对,是不是这个是那怎么办呀,收一个name,哎说老师那我收到name了,那我怎么给B传呀,哎呀太简单了呀,对吗。捋顺一下。A标签写了一个特殊的render属性。A,标签里自己调了一下render。然后呢,给他传了一个name,然后呢,这就接到了一个name,然后呢,然后呢,是不是就传给B了呀?哎,好了,同学,那我问你B这回是不是就收到了呀,回头看效果,Tom是不是来了呀。哎,所以说同学看这知道A和B啥关系吗?不知道,我想通过程序员编码的时候,我再确定你俩是父子,那所以说呢,就可以这么写对吧。
19:08
哎,说老师呢,这么写的灵活之处在哪儿呢?这么写的灵活之处在于我这里边可以提前准备好一个固定的代码,就一直在调this.prop render,这是不是写了一个name呀?啊,其实你传不传这儿呢,也都无所谓,主要是想把东西给它放在这儿。啊,把一个组件放在这儿,同学,我这么写是不是调render了,嗯,调render之后是不是个函数,嗯,有没有返回值,有我把谁放在这了,返回值是啥呀?是不是B组件呀,那各位我是不是把B组件放这儿了呀?同学,举个例子,咱之前是不是写了一个set state里边关于求和那个案例啊,我想把它放在这儿,哎,就放在这儿,我就想把它放在这儿怎么办?灰常简单,灰常灰常的简单引入,比如说这个组件叫做C,当前路径不行了,点点杠是不是翻出去找到这index是不是不用写了?好同学非常灵活,把B改成谁C,这个时候你就瞧好吧,回到这儿刷新一波。
20:15
觉没觉得把之前写的求和那个案例的组件呗,就写在这儿了呀。同学,你有没有一种感觉,这块我预留了一个区域,这块我预留了一个位置,但是这个位置到底放谁我不知道,我具体调render,然后我在这个里边可以随意的控制把哪个东西,诶放在这个位置,放在这个预留的位置。所以说同学,如果你了解过view的话,其实这就是view里的什么呢?插槽技术,对吧?同学,什么叫插槽技术啊?就是在一个组件的指定位置,预留好一个位置,我以后呢,哎,我要往里放东西,但是放什么我还不确定。说老师那你这么写呗,那真麻烦,你就把C得了呗,同学,你这么写我得承认也行,那你看呗,也能出来对吧?但是我想问的是,你这是不是写死了呀?
21:10
以后你想改东西的时候,你是不是得麻烦那个写A组件的人,你得你得告诉吧,你说哥们儿,你帮我改一下你那24行代码换组件了,我不想写C了,麻烦吧,但是如果说你这样跟人聊啊,你说A组件的定义者呀,你就在24行呢,给我预留这么一个东西,z.prop.render哎,你就给我调一下,然后呢,以后这东西放啥,那你就别管了,我这边一传是不是就可以了,那你觉不觉得同学,那这就是把一个东西塞到了一个指定的位置啊,而且不仅塞,我是不是还能带一些指定的属性进去啊,值进去啊,那你觉不觉得这就很灵活了呀?这就是我们说的什么呀,Renders同学体会体会,为啥叫render pops,为啥呀?因为你这个render不是组件里的这个render,你这个render呢,是标签属性里的一个render,那我问你我给A干嘛呢。
22:07
我是不是在给A传递props呀,各位,是的,那我给A传递的是什么props呀?不是一般的东西,是一个render props,对吧?来撤回来重新打啊,盖住了red啊,我给A传递的是一个render props,为啥叫render props,这render能掉,为啥叫render?因为它返回值是一个组件,我可以把组件插在这个位置,这就是插槽技术,View里叫插槽啊,但是react里边没有这个概念是吧?哎,大家大家也得知道一下,好同学呢,我想问一下,我不写render行不行,我写小猪佩奇的佩奇。行不行?其实完全可以,只要保证你把东西传过来了,它是一个函数,能调,这函数一调能返回一组件就足以了。所以说保存来到页面刷新,你会发现各位啊,走是不是也可以啊,但是一般我们不传别的名字,各位我们一般都叫render,为啥呢?因哪亚同学你在这写佩奇,人家一看看不明白什么玩意儿,this.property佩奇这咋还调用了呢?
23:11
是吧,人家看不明白,但是如果你写了render,我们react的编码人员如果看到了this.props.render马上互相就心照不宣了,就都明白了啊,知道了,这哥们呢,预留了一个位置,这边又传过来一个组件,就是这么回事,这就叫做render props回到我们的笔记看一下总结,同学啊,如何向组件内部动态的传入带有内容的结构呢?哎呀,这东西拿文字一说吧,你觉不觉得读起来都得反映反映什么?如何像组件内部动态传入带有内容的结构?其实说白了,同学就是如何把一个第三方的组件或者是第三个组件摆在某一个组件的指定位置,而且我还要传递数据,对吧?View中使用什么呢?Slo插槽技术啊,可以这么写,React中呢,我们得借助props同学,我们有两种props,第一种是children props什么意思呢?
24:09
Children pros啊,其实就是刚才我写的这一堆玩意儿,就这么写的,嗯,啊,这块肯定是报错的啊,因为这个佩奇呢,刚才不是被我改了吗?我刷新一下就好了啊走你看着啊,同学你就比如说刚才啊,我这个A标签啊,我是不是这么玩的啊,刚才刚才我是这么玩的啊走,我里边是不是写了一个hello啊同学这个hello呢,诶。He,这个hello呢,各位,它就属于什么props,你告诉我,其实它就属于children props。哎,它就属于children props,那像我刚才写的那个呢,就属于什么呀,来走走走,诶这就属于render props是吧?好了,回到我们的笔记,说children props啊,是可以通过组件标签呢传递这个一些结构进去,而你用了render props呢,你也可以通过这个组件标签的传入结构,而且呢啊,你还可以带一些数据,对吧?然后一般呢用render属性,那这应该补一句,咋说呢?而且咋的可以携带数据,诶再来个逗号,一般我们用render函数属性啊children props就是这么写的,直接写B对吧?these.prop.children是不是也能展示啊,但是有一个问题,如果B组件需要需要什么呢?A组件里的数据,那刚才你也看到了,是不是做不到呀?但如果说诶各位你用的是render props是不就可以啊?
25:31
哎,好了,那这小节呢,我们停一下。
我来说两句