className 还能这么用,你学会了吗
抛出问题
className
大家都用过吧,用它在react
项目中设置样式。它的用法很简单,除了可以设置一个样式外,react
中也可以使用className
引入多个类样式。
这次在写项目的时候,碰到一个非常小但是当时却一直解决不了的问题。后面在复盘的时候将它解决了。问题大致是这样的:
有两个活动页,每个活动页上都有一个活动规则图标来弹出活动规则,活动规则图标距离顶部会有一个值。现在问题就是这个活动规则在这两个活动页距离顶部的这个值是不一样的,但是我已经将这个活动规则图标做成了组件,并在这两个活动页里都调用了它,从而导致两个页面的样式会相同。如下图所示:
解决问题
这个问题不算很大,但是属于细节问题。就和我的组长所说的一样,一个项目应该要做到先完成再完美。所以我当时的解决方法是再写一个活动规则组件,只是将距离顶部的值做出修改即可。效果确实是达到了,不过在最后复盘代码的时候,组长注意到了这两个组件,并开始询问我为什么这样做。
组长:Rule_1
和Rule_2
这两个组件是什么意思,我看它们没有很大的区别呀。
我便简单说了一下缘由。
组长接着说:你忘了组件是什么吗?一个CSS
样式值不同就大费周章地新增一个组件,这岂不是太浪费了。再去想想其他方案。
通过这一番谈话我想起了组件化思想的运用,发现之前解决的这个小问题解决的并不够好。于是,我就带着组件化思想又来重新完善它。
我重新写了一个demo
代码,将主要内容和问题在demo
代码中体现出来。下面是原版活动规则组件demo
代码,之后的代码都是基于demo
代码完成的
import React from "react";
import "./index.css";
const Header = ({ onClick }) => {return (<><div className="container_hd"><divclassName='affix'onClick={onClick}></div></div></>);
};
export default Header;
组件化思想
我自己问自己:既然已经写好了一个活动规则组件,为什么仅仅因为一个样式值的不同而去新增一个功能一样的组件?很显然,这种方法是最笨的方案。既然是组件,那就应该要有复用性,或者说只需在原有的基础上稍加改动就可达到效果。
这是样式的问题,因此要从根本上解决问题。单纯地修改 CSS
样式肯定不行,因为两个页面两个不同的样式。
className 运用
className
就不用多介绍了,经常能使用,咱们直接来看如何解决问题。在这里我定义了一个 Value
值,用来区分是在哪个页面的,比如分别有提交页和成功页,我在成功页设置一个 Value
值,,然后将 Value
值传入到活动规则组件,那么在活动规则组件里只需要判断 Value
值是否等于成功页的 Value
值即可。在 className
处做一个三元判断,如下所示:
className={`affix_${Value === "0" ? "main" : "submit"}`}
相当于如果Value
等于0的时候类名为affix_main,否则为affix_submit。最后再css
将样式完善即可。完整代码可以参考如下:
- 成功页组件
import Header from "./components/Header";const Success = () => {const Value = "0";return (<div style={{ backgroundColor: "purple", width: "375px", height: "670px" }}><Header Value={Value}></Header></div>);
};export default Success;
- 活动规则组件
import React from "react";
import "./index.css";
const Header = ({ onClick, Value }) => {return (<><div className="container_hd"><divclassName={`affix_${Value === "0" ? "main" : "submit"}`}onClick={onClick}></div></div></>);
};
export default Header;
- 活动规则组件样式
.container_hd {width: 100%;
}
.affix_main {position: absolute;top: 32px;right: -21px;z-index: 9;width: 84px;height: 26px;background: url('./assets/rule.png');background-size: contain;background-repeat: no-repeat;
}
.affix_submit {position: absolute;top: 12px;right: -21px;z-index: 9;width: 84px;height: 26px;background: url('./assets/rule.png');background-size: contain;background-repeat: no-repeat;
}
通过对比效果图可以看出,两者的效果确实发生变化。完成之后,我心里在想:为什么当时就没想出这个简单易行的方案呢?动态判断并设置类名,至少比最开始的新增一个组件的方法高级多了。
总结问题
对于这个问题的解决就这样告一段落了,虽然看起来比较简单(一个动态设置类名),但是通过这个className
的灵活使用,让我对className
的用法有了更进一步的掌握,也不得不感叹组件化思想的广泛运用,这里最大程度地将组件化思想通过className
发挥出来。
因此,希望通过这个问题,来学会className
的灵活用法,并理解好组件化思想。当然如果大家还有更好的解决方案的话,欢迎在评论区告诉我。
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
className 还能这么用,你学会了吗相关推荐
- kafka删除队列_没想到 Kafka 还会这样问,学会这些带你轻松搞定大厂面试!
一.前言 自上次师兄遭受了面试官 「Kafka」 的暴击追问后,回来发奋图强,企图"「吊打面试官」",奈何还是面试官套路深啊,最近的面试,又被问到「知识盲点」了!让我们一起来看看, ...
- 程序员玩‘附近的人’,妹子还没泡,先学会了个专业技能!
大家好,我是吕一明. 唉,作为一个程序员,好无聊呀!!!每天不是打代码,就是玩游戏.什么时候,我才能谈一场像这样甜甜的恋爱! 好寂寞,好空虚,好冷!没有妹子的日子,我真的好孤单. 不知道附近有没美女邂 ...
- i58400升级可以换什么cpu_为什么明星经常换发型发质还那么好?只要学会这一点,你也可以...
大家应该都很好奇,为什么娱乐圈很多女明星经常换发型,不是染就是烫,但是发质依旧那么好.其实,就算天生的发质再好,也经不起频繁折腾,那些发质好的女星只不过是日常注重护理头发罢了,只要你也跟她们一样用心护 ...
- 原来QQ聊天记还能这样找回!学会之后再也不用担心删除了
当下年轻人使用最多的社交应用微信.QQ,这两款应在手机上几乎每天都被大家使用.和微信相比QQ使用人群大多都是年轻人.那么使用QQ聊天的时候把聊天记录删除的话,还能找回吗? 如果你的QQ更新到最新版的话 ...
- 即便学会了Markdown,也没想到还可以这么干 —> 学会==提高效率
前言: 不知不觉,已踏上水文之路:为了满足读者的观感,决心学习一下推文排版技巧,这篇文章就总结一下; 文章目录如下 文章目录 写作前期 trello 写作中期 typora+iPic+坚果云 iPic ...
- Enscape 3.4这些功能还不会用?学会让你事半功倍
Enscape是面向建筑师.设计师和其他 AEC 专业人士的实时可视化和 VR 插件.其最新更新Enscape 3.4为现有功能提供了有价值的更新,因此您可以继续改进您的设计和可视化体验. 功能更新包 ...
- excel日期格式改不了_日期还在手动数?学会自动计算,节约90%的时间
私信回复关键词[福利]~ 获取丰富办公资源,助你高效办公早下班! 大家好,我是秋小 E~这里是秋叶 Excel 的[问答精华]专栏! 问题主要来自秋叶 Excel 学习班的同学,回答由讲师.助教共同完 ...
- 科学家风采|郑纬民:任中国计算机学会理事长四年的三点回忆
郑纬民 CCF会士.CCF前理事长(任期2012-2016年).清华大学教授,中国工程院院士,<大数据>主编.主要研究方向为并行/分布处理.网络存储器等. 我为中国计算机学会做了很多事情, ...
- 参加这些学术会议,还怕发不了SCI?
-01- 计算.通信.感知与量子技术国际会议 会议信息 : [会议时间]:2022年8月5日-7日 [截稿时间]:2022年5月20日 [会议地点]:中国·厦门 [会议官网]:http://www.c ...
最新文章
- yii 操作cookie
- android点击隐藏控件,Android编程实现点击EditText之外的控件隐藏软键盘功能
- Spring Boot 上传文件(spring boot upload file)
- 开发工具:Git超全实用技巧,值得收藏!
- 总结Java常见面试题和答案
- 源码剖析 Netty 服务启动 NIO
- 业务类型创业公司,最好不要招程序员
- php依据地理坐标获取国家、省份、城市,及周边数据类
- 使用其它模块的头文件
- 滚动插件 animatescroll(可以设置要滚动到位置)
- FPS透视自瞄辅助-游戏漏洞及原理
- 半透明旋转魔方特效的实现
- 【一周读书】All life is problem solving
- 各类学生机万能卸载攻略
- 如何卸载Visio秘钥
- 双机热备和磁盘阵列柜
- strlen、strcpy、strcmp、strcat函数的实现
- 菜刀php教程,中国菜刀的功能介绍和使用方法
- 个人对宏观经济学的理解
- VM安装Windows2003系统