00:00
好,那下面呢,我们就要去开始去写我们的这个这个应用啊,写我们这个应用啊,我们现在来去写这一个聊天组件的功能,那聊天组件我们先要把这个组件是不是创建出来啊,我们的组件还没创建,这是一个路由组件啊,这是一个路由组件,大家看一下我们最终的一个效果就在这。点开它啊,点它某一个能看到吧,啊,点击它就进来啊好。进来的时候呢,我们来去先把组件创建出来啊,不管那么多组件,嗯,它是一个容器组件,肯定要去跟瑞大进行通信的,我们来去创建一个文件夹啊,就叫什么呢?CH,来再拆创建一个呃,文件叫char.jsx。对吧,那它既然是一个容器组件,那就有些东西是特别固定的,我还可以引入一点东西,引入什么。
01:03
嗯,Import,嗯,那个connect是吧,接着from。React redux。写法固定了啊,接着是看括号再括号是吧,接着了我们首先传的外围传的是差。啊,这个里面的结构很固定是吧,State箭头小括号大括号,哪一个接着是大括号。对吧,好,这个差的是一个路由组件是不得注册。啊,它也是谁的子路由,Main的子路由,那也就是说我们需要在这里面是不是给他注册一下,那注册一下的话,来注册一下啊写呗,这东西没什么难度,Import我的chart from点点斜杠CH下面的看。
02:09
好。来这里面有一个非常重要的一个东西啊,把它复制一个路径,路径是多少呢?看一下这里,这很有意思啊,大家呢,这个路径比较奇怪,这样的。嗯。这里面多写这个是吧,啊恰写他的吧,啊恰恰对吧,好把这个搞搞啊。还有前面这俩路径是这样的,那我这么也对吗?那肯定不对,那右边的这个是什么东西?大是用户的ID跟某一个用户的聊天吗?你说你想啊大下我点叉是不是又来一个,也就我这么写的肯定不行。
03:08
那也就是说,我要写一种写法能够匹配任意的UID。是吧,我应该怎么搞。冒号ID,冒号ID不太好。ID,谁带ID的?是不是让我让我感觉就是差点来一懂不懂这样不对,所以看别你看懂了吗。这个能不能理解好嘞,好,下面注册好它以后,我们现在的功能是不是点击在某一项。跳转了,我们来做一下啊,来做一下。我们呢,先在这个恰恰里面写一个啊恰可以吧啊接着呢,在这里面去啊先先就这样啊先这样我们看等会来显示好,下面我们要去做的是哪一个组件呢?我们现在是不是点击某一行啊。
04:09
这是哪一个呀啊user list组件对不对。对吗?那也就是说我们点击某一项。啊,这个card吧,我们点击这个card这个卡片。啊,不用搞定位卡片啊,这里有一个画啊,不用点,也就是说白了,点击这里面的去点击这个中间就不行啊,来叫on什么click,等于我们应该干嘛去,这里面我直接写函数啊,干嘛去啊。跳转,那我怎么跳转呢。的。History。有replace和push用哪一个?能用replace吗?
05:00
点一下。能用replace吗?不能。因为我要毁一退回来。能不能,所以用谁不。Push的路径是多少呢?斜杠差的,哎,再斜了。好啦。现在我是不是要去取到对方的ID,哎哟,我天,最近这段时间不知道怎么搞的,是讲课的时候总是咬舌头,我我现在终于知道我舌头为什么老出问题了,时不时的咬一下啊,想吃肉。好大家看一下啊,这样对吗。
06:02
不对,这是个动态的值,对不对,所以。应该叫什么多福大括号。这样的吧,那也就是说现在我去点击啊,来看一下,我来登录一下是吧,大神1123走你。是这个吧,总。Can't read property push off anyin,那也就是说现在啊,大家看到它是in。那他没有这个,没有这个,我们首先得说它是什么组件,非路由组件。对吧,非路由组件是不是得处理一下才行,小case。来引入一下啊import对吧,大括号from谁刚来一个with是吧,在这里面就写一个。
07:14
括号,User。可以了吧,可以了,来,再来一遍是吧,总理。是不是可以,嗯,这不挺好的吗?好,那跳转就好了,下面我们是不是要去写这个恰好,这个恰呢,有一个这样的一个界面啊,需要去整出来。那这个界面呢,我也不再去写了,因为列到前面我们界面已经念了好多遍了啊,再去念界面就没什么太大意思了,后面难的是这个里面有逻辑啊,还是挺费劲的啊,这个时候来看他。
08:02
我们这里面啊,有一个恰点GSX,它有一个东西叫什么呢?静态组件,我已经把它写好了,大家把这个静态组件呢,直接扩比过来。啊,静态组件。啊,我好舍不得呀。啊,搞一下他啊。哎,还留着。把它去掉。好来啊,先不用啊,先不去看,哎,这里面小稍微有点小问题啊,有问题啊,那这个也有问题是吧,这个我们叫这里没改啊叫嗯,叫头像。一或者投降是不是都行啊?嗯,就叫头像一吧。嗯,这个我我不是这个啊,我不是这个,我现在是这样一个东西,如果是我发了消息,我的那个名称呢,不需要头像是一个就一个字啊,就我。
09:11
就是我发的消息,嗯,我现在简化了一下,就我这样可能看的更加明显点,好我们先暂时就这样啊,我们来看一看以后我们再继续的往下去看,这里面还有一点小事情啊,还有一点小事情不要先不看,还有一个小样式的问题啊,小样式的问题。把这个样式呢,给他拿过来,这是为了那个消息要有文本居右的一个一个概念,不然的话默认它是不太对的,把这一个拿过来去改谁了?给他。好来,我们来看一下我们现在的一个情况啊,这不是我们的,来看一下他报什么错对吧,报什么错,他说诶这里面有一个什么images啊,我们还没有去改啊images。
10:04
这个呗。那么看到啊,主要刚才这样式呢,是是有这个,本来默认它是在这里。嗯,这样不太好,让他在右边来啊,这个实际上就是文本,我看到了吧,啊,我也不搞图像,就他搞头像,我不用搞头像了,好。那现在呢,肯定是这个数据都死啊,对吧,现在能发消息吗?那肯定也不能,我这里面啥也没做是吧,怎么可能能发消息呢,发不了啊好,那静态组件写好以后啊,其实我们后面要做的就是要去想办法有两个,你说我们这里面有两个功能,需要做哪两个功能。啊,更准确说有三个,第一个我们先要去读消息列表,要读吧,对不,还一个我们要去点击发送的时候,要什么发消息。
11:07
这个能懂吧,我们发完消息后,这里面要不要更新,要吧,要更新。啊,其实这里面啊,现在写的还不是最终的效果,我们是不是最些最后还有表情的呀。我们最终的效果是有表情的呀,大家看。就这玩意。听到不啊,是可以发表情的。表情文本都可以,都可以发,没问题,好,但是这个做起来还是有一点小费劲的,我们先做到这里为止啊,先把它停一下。
我来说两句