00:00
这小节我们再来学习一个扩展。就是。Fragment,它是做什么用的呢?它可以,哎,包裹我们的这个元素,然后在最后解析的时候,就是不解析这个标签,哎,我用一个例子大家就明白什么意思了。把这个关掉啊,上一节的。找到我们的组件,然后找到这个零五,那我们就不复制了,我们新建一个吧,因为这个例子就比较简单,新建一个目录。零六。水果论啊。来新建一个index点减X叉2CC tab补全。好,这个就随便写吧,就这个组件名嘛,然后把这个app.js里面改一下啊,那这个就不引零五了,引入这个06FRAGMENT来。好,之后我们来看看一个需求啊,现在我想写两个input在页面中啊。
01:07
那我来写input。来写两个引木塔啊,或者写三个。嗯,但是呢,这个呢,我们是能看到这个效果啊,我来看看啊是吧,但是这个是不是我并不是我最终想要的啊,我最终想要的是我就是在页面上放三个银葡萄。啊,而它给我带来什么包裹了一个div对不对,你通过检查页面元素,你会发现确实input的啊,这几个外面更包了层div对吧?这外面还包了层,这个是APP那一层的对不对啊,那我们如果想要直接把我们的三个input啊,就不要这个div直接去写到这里是吧?想要这种效果,那怎么办啊,我们把它删掉,但是react它不允许我们做做这么做对吧?我们外面必须得有一个跟标签,这时候怎么办?这时候啊,就出现问题了,就说我不想要你,但是你还得必须得让我包裹一个。哎,这时候。就得想办法了,那想办法谁呢?从react身上引出来一个啊fragment fragment呢,它是一个诶。
02:08
组件啊,那这个组件它的作用就是说啊,可以在最外层去包裹我们的这个。嗯,其他的组件对吧,那最外层也是这么这么一层包裹,但是它有的作用说在最后给我们哎解析的时候,它是会给忽略掉的啊,就直接给pass掉,是不写不解析它的,那我们来刷新看一下啊。来你可以看到,诶,Div少了一层是吧?啊这还有一层这个谁这个是这个是A,那其实使用这个我们A也可以不要来找到a divs,那这里它还包着div呢,对吧,那我不想要这个div,我就可以去再引入一个frament,然后那这里就用这个frament,哎,接着再来看一下,好。这个D没了,那我们的这三个input就直接到了root下面,哎,这对我们的页面的布局还是有些帮助的啊,因为。我只是想放三个input而已,你非要给我啊包了一层又一层的这个div对吧,那没办法,那因为这个组件就说我们的GS叉语法,你最外层必须得有元素是不是,所以说所以说这时候我们就可以使用forgment。
03:10
明白了吗?好。那接下来。我带带大家看一下啊,还有一种写法,那就是我什么都不写,写个空标签。你空标签,我也把你给包裹了。看到了吧,那我们看看效果一样不一样,你无非就外层你得有一个标签,包括你吗?那我我包裹一个空标签不行吗?是不是也行,是不是也没有一样的,对不对?好,但是这个空标签和这个fragment它有一个一个区别啊,一个什么区别呢。就是说我们想想之前在啊,便利一堆人的时候啊,便利很多数据的时候,是不是得为便利的这个啊迭代的这个数据项要加上一个K对不对,要指定一个K是什么什么什么是吧?好,那这个fragment我们就可以给它加上K,也就是说我们要去循环这个整体这个去遍利整体这个数据的时候就要用啊这个free,因为它可以带上这个K的这个这个属性啊,但是你空标签就不行,你看直接画红线了啊,你空标签就不能有任何属性,这是点区别,那我们如果要做数据迭代的时候,就要使用这个辅助ment啊,但是它也仅仅是说能带一个K而已,用来做这个迭代。
04:17
呃,就是说循环数据的时候啊,用作唯一的K嘛,它你不能带其他的属性了,你带其他属性没有任何用,清楚吧,因为这个标签最终它它都不会解析,你带其他属性还有什么用。啊,那这个比较简单啊,笔记也给大家形成了。啊,作用呢,就是我们可以,嗯,就说不用再去包裹一个标签了啊,不过不用再去包裹一个跟标签啊,它最后再被解析的时候就直接忽略掉了那。这这个就是fment啊,如果你在写,就是说写页面布局的时候碰到了这个需求,不想去包裹一层div的话,那你就可以尝试使用这个fment啊。好的,那这小节到这。
我来说两句