【React】classnames 优化类名控制

1. 介绍

classnames是一个简单的JS库,可以非常方便的通过条件动态的控制class类名的显示
ClassNames是一个用于有条件处理classname字符串连接的库
简单来说就是动态地去操作类名,把符合条件的类名粘在一起
在这里插入图片描述

现在的问题:字符串的拼接方式不够直观,也容易出错
在这里插入图片描述

2. 安装

npm install classnames

3. 引入

在nodejs里引入

var classNames = require('classnames');

在js里引入

import classnames from 'classnames'

基本使用

普通字符串粘合

将参数拼接为字符串,中间用空格分开

classNames('foo', 'bar'); // => 'foo bar'

带条件的类参数

这里第二个参数是对象类型,键值为true,则粘合进classname里

classNames('foo', { bar: true }); // => 'foo bar'

若为false,则不粘进去

classNames('foo', { bar: false }); // => 'foo'

参数类型是数组

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

特别注意

null和undefiend会被忽略

classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

在react中优雅地使用classnames

下面这段代码,通过if-else判断state的状态,动态选择btnClass的具体值

class Button extends React.Component {// ...render () {var btnClass = 'btn';if (this.state.isPressed) btnClass += ' btn-pressed';else if (this.state.isHovered) btnClass += ' btn-over';return <button className={btnClass}>{this.props.label}</button>;}
}

现在用classnames来做,btnClass就可以边成一个对象,通过键值的条件确定最终生成的classname

import classnames from 'classnames'class Button extends React.Component {// ...render () {var btnClass = classnames({btn: true,'btn-pressed': this.state.isPressed,'btn-over': !this.state.isPressed && this.state.isHovered});return <button className={btnClass}>{this.props.label}</button>;}
}

我的使用

import classnames from 'classnames'<li className="nav-sort">{/* 高亮类名: active */}{tabsList.map((item,index)=><span className={classnames('nav-item',{active:item.type===type})}key={index} onClick={()=>{changTab(item.type)}} >{item.text}</span>)}{/* {tabsList.map((item,index)=><span className={`nav-item ${item.type===type && 'active'}`} key={index} onClick={()=>{changTab(item.type)}} >{item.text}</span>)} */}</li>

原理

classNames源码:

function classNames() {var classes = [];//用于存储生成的类名for (var i = 0; i < arguments.length; i++) {//遍历classnames的所有参数var arg = arguments[i];if (!arg) continue;var argType = typeof arg; //拿到每一个参数的类型if (argType === "string" || argType === "number") { //如果是字符串或数字就直接加到classes数组里classes.push(arg);} else if (Array.isArray(arg)) { //如果参数是数组,则将数组的值当作参数调用自己if (arg.length) {var inner = classNames.apply(null, arg);if (inner) {classes.push(inner);}}} else if (argType === "object") { //如果是对象且有自定义的toString方法,则调用toString方法添加到classes对象里,if里面的表达式下面会详细介绍if (arg.toString !== Object.prototype.toString &&!arg.toString.toString().includes("[native code]") ) {classes.push(arg.toString());continue;}for (var key in arg) {if (hasOwn.call(arg, key) && arg[key]) { //如果键值为真就加进classes数组里classes.push(key);}}}}return classes.join(" ");// 最后在中间加上空格转成字符串
}

arg.toString !== Object.prototype.toString啥意思?

我们知道所有js对象都继承Object对象,即都继承toString方法,这个表达式的意思就是这个对象的toString方法不是继承自Object.prototype

arg.toString.toString().includes(“[native code]”) 啥意思?

我们首先要知道toString方法的一些知识:当我们对一个自定义函数调用toString()方法时,可以得到该函数的源代码;如果对内置函数使用toString()方法时,会得到一个’[native code]'字符串。因此,可以使用toString()方法来区分自定义函数和内置函数,注意是对函数调用toString()方法,所以我们通过对toString函数调用toString方法,就能得知这个toString是内置的,还是自定义的

这里两个表达式连起来的意思就是:现在这个类有toString方法,而且还是自定义的
  References

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24688.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

KMeans聚类分析星

1. datasample initial_centroids datasample(data, k, Replace, false); 是MATLAB中的命令&#xff0c;用于从数据集data中随机抽取k个样本作为初始聚类汇总新&#xff0c;并且抽取时不放回。 datasample&#xff1a;是MATLAB中的函数&#xff0c;用于从数组中随机抽取样本d…

halcon算子之prepare_object_model_3d详解

为某一操作准备三维对象模型。 Description 操作符prepare_object_model_3d准备3D对象模型ObjectModel3D,用于下面目的中给出的操作。它计算操作所需的值并将其存储在ObjectModel3D中,从而加快了后续操作。没有必要调用prepare_object_model_3d。但是,如果要多次使用3D对象…

5、js关于数组的常用方法(19种)

一、改变原数组的方法 1.push&#xff08;&#xff09; 末尾添加数据 语法&#xff1a; arr.push(要插入的数据可以多个) // push 尾部添加数据const arr [1,2,3,4,5];arr.push(6,7);console.log(arr);//(7) [1, 2, 3, 4, 5, 6, 7]2. pop&#xff08;&#xff09; 末尾删除一…

大疆智图_空三二维重建成果传输

一、软件环境 1.1 所需软件 1、 大疆智图&#xff1a;点击下载&#xff1b;   2、 ArcGIS Pro 3.1.5&#xff1a;点击下载&#xff0c;建议使用IDM或Aria2等多线程下载器&#xff1b;   3、 IDM下载器&#xff1a;点击下载&#xff0c;或自行搜索&#xff1b;   4、 Fas…

探索 Noisee AI 的奇妙世界与变现之旅

日赚800&#xff0c;利用淘宝/闲鱼进行AI音乐售卖实操 如何让AI生成自己喜欢的歌曲-AI音乐创作的正确方式 抖音主播/电商人员有福了&#xff0c;利用Suno创作产品宣传&#xff0c;让产品动起来-小米Su7 用sunoAI写粤语歌的方法&#xff0c;博主已经亲自实践可行 五音不全也…

[经验] 涠洲岛在广西吗 #职场发展#知识分享#媒体

涠洲岛在广西吗 广西涠洲岛&#xff0c;是中国南海上的一颗闪亮明珠&#xff0c;位于广西北部湾沿海&#xff0c;东经108.71度&#xff0c;北纬21.54度&#xff0c;距离北海市区30公里&#xff0c;是中国最大的海岛之一&#xff0c;风景秀丽&#xff0c;气候温和。岛上山青水秀…

!力扣3. 无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"abc"&#xff0c;所以其长度为 3 示例 2: 输入: s "bbbbb" 输出: 1 …

PCE自动装机

服务端和客户端 pxe&#xff1a;c/s模式&#xff0c;允许客户端通过远程服务器(服务端)下载引导镜像&#xff0c;加载安装吻技安&#xff0c;实现自动化安装操作系统。 无人值守&#xff1a;安装选项不需要认为干预&#xff0c;可以自动化实现。 pxe优点&#xff1a; 1.规模…

Overall timing accuracy 和Edge placement accuracy 理解

在电子设计自动化(EDA)、集成电路(IC)制造和高速数字电路设计领域,"Overall Timing Accuracy" 和 "Edge Placement Accuracy" 是两个关键的性能指标,它们对于确保电路的功能正确性和性能至关重要。 当涉及到“Overall timing accuracy”(总体时序精度)…

最小相位系统

最小相位系统 1、传递函数 一个线性系统的响应。 比如一个RC低通滤波器&#xff1a; 交流分量在电容的充放电中被滤除掉&#xff0c;通过设置电容器的电容值&#xff0c;以及电阻值&#xff0c;能够控制这种滤除能力&#xff0c;这个参数为RC。 电容的电抗为 1 / j w C 1/j…

单片机+TN901非接触式红外测温设计

摘要 温度测量技术应用十分广泛&#xff0c;而且在现代设备故障检测领域中也是一项非常重要的技术。但在某些应用领域中&#xff0c;要求测量温度用的传感器不能与被测物体相接触&#xff0c;这就需要一种非接触的测温方式来满足上述测温需求。本论文正是应上述实际需求而设计的…

C语言实战:贪吃蛇(万字详解)

&#x1f4a1;目录 效果图 界面设计思路 1. 基本布局 2. 视觉元素 游戏机制设计 基本规则 游戏代码 前期准备 游戏代码详解 数据结构设计 宏定义 数据结构定义 函数原型&#xff08;详见后文&#xff09; 主函数代码 核心代码 Review 效果图 界面设计思路 1. 基…

转型AI产品经理(4):“认知负荷”如何应用在Chatbot产品

认知负荷理论主要探讨在学习过程中&#xff0c;人脑处理信息的有限容量以及如何优化信息的呈现方式以促进学习。认知负荷定律认为&#xff0c;学习者的工作记忆容量是有限的&#xff0c;而不同类型的认知任务会对工作记忆产生不同程度的负荷&#xff0c;从而影响学习效果。以下…

Python自学(适用于略有基础)

Python语法&#xff08;基于C语言基础和简单Python基础&#xff09; 参考学习资料&#xff1a;【你觉得自己这辈子都学不会编程&#xff1f;超超超基础Python课程&#xff0c;3小时快速入门 【自学Python教程合集】【3小时快速入门Python】】 https://www.bilibili.com/video/B…

Elasticsearch 认证模拟题 - 16

一、题目 创建一个搜索模版&#xff0c;要求 match_prase 查询&#xff0c;并且用指定的格式高亮&#xff0c;并排序 # 创建索引 PUT my_index {"settings": {"number_of_replicas": 0,"number_of_shards": 1},"mappings": {"p…

【SpringCloud学习笔记】Docker(上篇)

Docker 1. 前置准备 在学习Docker之前我们需要具备以下环境&#xff1a; Linux云服务器 / 虚拟机安装并配置Docker环境&#xff08;命令行中输入docker -v能够显示对应版本证明安装成功&#xff09; 2. 快速入门 要求&#xff1a; 我们先来尝试使用Docker创建MySQL服务&am…

如何离线下载 Microsoft Corporation II Windows Subsystem for Android

在本文中&#xff0c;我们将指导您通过一个便捷的步骤来离线下载 Microsoft Corporation II Windows Subsystem for Android。这个过程将利用第三方工具来生成直接下载链接&#xff0c;从而让您能够获取该应用程序的安装包&#xff0c;即使在没有访问Microsoft Store的情况下也…

ChatGLM2-6b的本地部署

** 大模型玩了一段时间了&#xff0c;一直没有记录&#xff0c;借假期记录下来 ** ChatGlm2介绍&#xff1a; chatglm2是清华大学发布的中英文双语对话模型&#xff0c;具备强大的问答和对话功能&#xff0c;拥有长达32K的上下文&#xff0c;可以输出比较长的文本。6b的训练参…

HTTP常见响应状态码

1xx&#xff1a;正在处理中 100 Continue&#xff1a;服务器确认收到了请求的第一部分&#xff0c;并告知客户端继续发送剩余的请求。 101 Switching Protocols&#xff1a;服务器根据客户端的请求&#xff0c;同意切换到另一个协议。 2xx&#xff1a;成功响应 200 OK&#…

pycharm使用pip安装依赖包报错 -----Microsoft Visual C++ 14.0 is required解决方法

pip安装第三方库的时候会报错&#xff1a;需要Microsoft Visual C14.0或更高版本。 报错原因 因为pip所安装的包需要使用C编译后才能够正常安装&#xff0c;但是当前安装环境中缺少完整的C编译环境&#xff0c;因此安装失败。 这样解决方案就很明确了&#xff0c;安装完整的C编…