31_尚硅谷_NavLink组件包装优化.avi原创

来啊，我们来看一下。我们先来看一下刚才这个刚才这个这这这这个这个效果怎么出来的。是吧，为什么一点它就有一个背景颜色了。那肯定是样式对吧？嗯，首先我们来看一下这个当前的这个链接，它有一个什么特点呢。你看这两个链接都是A标签，为啥一个有颜色一个没有啊。这个下面这个A是不是有active呀，是我点谁谁有active对不对，那为什么有了active就有颜色呢。啊，因为这个啊，其实在boot里面有定义，Boot里面定义的这个类的样式就是这样一个颜色。看到吧，就这一背年。但是我就想要这。

对吧，你说老师你明显这个是不是帅一点，我就想要这个嘛。那我就想跟他做的一样，是不是说白了就是要如何来自定义，懂不懂啊，有两种方法，一种是把这一个类名。啊，跟那个证明这个类名是不是重写一样，这个类名所对应的样式啊，其实这个类名它是默认的一个名字，也可以指定别的名字。啊，怎么指定呢，我不知道那怎么办。看文档呗，是吧，找文档啊，大家我们适当的看一下文档，看谁了，看他呗。好，他的这个A什么意思。看着吧，Active class吗？就活的这个，激活的这个。

类的名字叫什么？那也就是说我可以去。在这个里面。啊，是不是给他配置一个。来配在这吧，好呗。等于什么？写一个字符串是自己写个名字，比如说我就写一个active class，我就写个这个名字啊，那说你说我改成他以后还能有被联是吗。那就看boot里面有没有定义这个类名了，是吧？来看一下。还有吗？没有了。没有怎么办？那我得自己定义是吧，啊，我得自己定义来啊，因为我们这里样式呢，自己定义样式不多，所以呢，我就这么简单的做一下。啊，在这里面建一个样式文件叫index.css。看到吧，好，在这里面写个什么。

啊，对吧，写一个color为一个red红色。是这样的吧，那接着我要在这个index里面给他什么引入。点斜杠。Doex。发现。反正还行，对吧，看一下吧，我得去看一下到底怎么回事，对吧。有那边的吗？有了没有，有了有了我这个类名还不行，说明什么？说明十有八九被覆盖掉了。是吧，被面覆盖，我不想别人，被别人覆盖怎么办？啊，加一个什么感叹号important对吧。是好了啊好了行。并不是说这个就比开起来漂亮，明显开起来要好一点，说实话啊，对吧，只是说我们能不能自已整自己的。

好，那这个弄好以后，下面我们要去做一个做一个功能啊，先说一个这个事，这个里面有个是我以后所有的导航链接都是这样一个红色。有一个有一个问题啊，就代码不太好的地方是每一个都要这么写吧，你不觉得烦吗。是吧？能不能不写啊？我又需要这个样子啊，我需要这个东西，但是我不希望每一次写level link都写这个东西。太繁琐了，因为这都是固定的是吧，我这个写法是固定的怎么办呢。大概呢，我做一个代码上的优化。看我我来去定一个组件。啊，我组建的名字呢，你看到我名字，你就应该知道是要干嘛。将my neck。什么意思？

我用一个组件来包装一下。就我的来嘛，来看下啊。好，我的名字叫my level是吧，我这个不是反馈，第二位是反馈什么呢？就是那个来link。From，哎呀，他挺聪明啊。来，我返回来就是这个标签，所以这些都不要了。看到我，我返回的就是它，那返回的就是它，大家看着啊，这里有些事情。那我一上来我就给他。干嘛加上这个。这个东西。

看到吧。但是就这么做不行啊，啊，你看到我就这么做一下啊，我先暂时就这么做的啊，等会看有什么问题啊，也就是说我这么做以后，我外面还用它吗。不用了吧，我有谁呀，MY。是不是？那也就是说这个地方我不用这一个了，是吧，它不需要了吧，不需要了，那我们去引入什么自定义的import my from，点点啊点斜杠吧，应该是。啊，买对吗。那接着呢？是不是替换它就行，也就是我还写这个吗。是不写了，但不写了有一个问题，大家想这个要不要写？要写，但要写，我写了有啥用啊？我写了，但是关键是啊，我写了以后白费了，知道为什么吗？这没用啊。

外传吗？我有传过去吗？没有，我根本就没传过去，对不对？那你说我写就白写了。因为表面上传的to实际上。肯定是没有传出，对拿传出来了。因为无论突吐这个都没传。什么意思啊，也就是说我希望要实现一个什么效果呢？你给我传多少属性。我就要将那些所谓的属性都传给什么。Never。是这意思，怎么做到的？哎，这一首非常关键的，这个东西就来了，这个东西无敌。啊，OK this pro。

你又没有这个语法。活不下去。为什么？因为我又不知道他传什么。对吧？有人说你不知道吗？你在里面不吐吗？真的不知道，但关键我有别的呢。是不是我还定义了别的属性呢？那你是不是就是这个组件要写死了。没法写的，这个就是非常灵活的一种写法，这是什么意思啊，这个就是将外部传入的所有什么属性传递给谁，是不来link。对吗？我管你，你定什么我就给你传什么。也就是说，用na用这一个组件，人就相当于在用na link。有level能写哪些，他就能写哪些，对不对？那么懂，此时我就不用去再去定义什么pro pro。

因为我问我不用定义了，就他以前能传什么，就他能传什么，那我这个标签是不是也能传什么。这你吧，说白了，我就在它原有的属性上加了一个属性，就这一个。是吧，那这样的话，我用的时候是不是要简单一点了，不用再指定样式了吧。不用再指定类名了啊，这个类名是固定的，所以要指定一下是吧。这个这个不用指定了。统一有的啊，这个用来控制样式的，说白了就是这个用来控制我们当前选中的那个链接样式的。是我在内部指定的吧。啊，这是一种啊，这种形式大家要懂啊，就是包装一个原有的组件。怎么包装，嗯。并不是说我一定要做这个事啊，就当前我不做也行，但是我想通过这个例子告诉他如何来包装一个现有的组件。

好，来看一下，我们做了以后效果应该还是有的。对吧，效果是同样的效果没有变化。这是这样一个优化的操作啊。