React | classnames

classnames 这个库在我们的项目中有大量的使用到,它不仅很实用,还非常好用,但还有人不知道这个库,我真的是十分心痛。

通过 classnames,我们可以给组件设置多个 className,还可以根据需要动态设置 className,简化我们样式相关的逻辑代码。

// 鼠标离开
.btn-leave {background-color: red;font-size: 25px;
}// 鼠标放上
.btn-over {background-color: green;font-size: 40px;border-radius: 20px;
}.btn-color {color: yellow;
}.btn-margin {margin: 50px;
}
import { default as classNames } from 'classnames';
import { Component } from 'react';
import './style.less';export default class ClassnamesPage extends Component {render() {return (<div style={{ padding: '20px' }}>ClassnamesPage<MyComponent></MyComponent></div>);}
}class MyComponent extends Component {state = {// 鼠标是否放上去isMouseOver: false,};render() {// 设置多个classNamevar btnClass = classNames('btn-color', 'btn-margin', {// 动态设置className,右边为true时生效'btn-leave': !this.state.isMouseOver,'btn-over': this.state.isMouseOver,});return (<div><buttonclassName={btnClass}// 鼠标放上onMouseOver={() => {this.setState({isMouseOver: true,});}}// 鼠标离开onMouseLeave={() => {this.setState({isMouseOver: false,});}}>{this.state.isMouseOver ? '鼠标放上' : '鼠标离开'}</button></div>);}
}

在这里插入图片描述

在这里插入图片描述

这个按钮,鼠标离开与放上去时的样式不一样,通过 classnames 库非常简洁直白的实现了这个功能,你真的值得拥有。

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

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

相关文章

模块四:前缀和——DP35 【模板】二维前缀和

文章目录 题目描述算法原理解法一&#xff1a;暴力模拟&#xff08;时间复杂度为O(n*m*q)&#xff09;解法二&#xff1a;二维前缀和&#xff08;时间复杂度为O(m*n)O(q)) 代码实现解法二&#xff1a;前缀和&#xff08;C)Java 题目描述 题目链接&#xff1a;DP35 【模板】二维…

三星电脑文件夹误删了怎么办?恢复方案在此

在使用三星电脑的过程中&#xff0c;我们可能会不小心删除了某个重要的文件夹&#xff0c;其中可能包含了工作文件、家庭照片、视频或其他珍贵的数据。面对这种突发情况&#xff0c;不必过于焦虑。本文将为您提供几种有效的恢复方案&#xff0c;希望能帮助您找回误删的文件夹及…

openEuler-22.03安装 mysql8.0.32

一、下载解压 下载地址&#xff1a; MySQL :: Download MySQL Community Server (Archived Versions) tar -xvf mysql-8.0.32-1.el7.x86_64.rpm-bundle.tar -C /opt/mysql-8.0.32 二、安装 最开始安装一直报错 缺少 libcrypto.so.10库文件,安装openssl可以解决 wget http://…

kafka 线上消费积压问题

背景 线上kafka 流量大&#xff0c;消费小于生产&#xff0c;如何处理&#xff1f; 方案 增加consumer数量 可以增加consumer的消费者&#xff0c;不过这个只能在一定程序上缓解&#xff0c;如果consumer 数量超过partition 数&#xff0c;那有的就会空转&#xff0c;解决不…

rabbitmq报错

文章目录 Applying plugin configuration to rabbitDESKTOP-C3HQ9BK... Plugin configuration unchanged.rabbitmq-service.bat start和rabbitmq-plugins enable rabbitmq_management这两个命令在RabbitMQ中具有不同的功能和用途。以下是两者之间的主要区别&#xff1a; Applyi…

国家开放大学2024春学期《社会调查研究与方法-邮政学院》形成性考核一参考答案

答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 某市城区有 18 个社区&#xff0c;常住居民 10000 户&a…

Java客户端如何直接调用es的API

Java客户端如何直接调用es的API 一. 问题二. withJson 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 问题 今天做项目的时候&#xff0c;想要直接通过java客户端调用es的api…

揭秘工业大模型:从人工智能小白到技术先锋

工业大模型的五个基本问题 信息化时代&#xff0c;数字化转型成为企业提升营运效率、应对经营风险和提升核心竞争力的重要途径。在此过程中&#xff0c;数据作为一种客观存在的资源&#xff0c;所产生的价值日益凸显。党的十九届四中全会从国家治理体系和治理能力现代化的高度将…

【万字长文】看完这篇yolov4详解,那算是真会了

前言 目标检测作为计算机视觉领域的一个核心任务&#xff0c;其目的是识别出图像中所有感兴趣的目标&#xff0c;并给出它们的类别和位置。YOLO&#xff08;You Only Look Once&#xff09;系列模型因其检测速度快、性能优异而成为该领域的明星。随着YOLOv4的推出&#xff0c;…

Java基础知识总结(78)

/** * 线程加锁 */ public class SynchronizedDemo2 { //静态成员变量 在主内存中 static int i; //静态成员方法 public static void add(){ synchronized (SynchronizedDemo2.class){ i; } } public static void main(String[] args) throws InterruptedException { Thread t…

双塔模型在召回和粗排的区别

答案参考&#xff1a;推荐系统中&#xff0c;双塔模型用于粗排和用于召回的区别有哪些? - 知乎 召回和粗排在不同阶段面临样本不一样&#xff0c;对双塔来说样本分布差异会使召回和粗排采取不一样的方式。召回打分空间是全部item空间&#xff0c;曝光只有很少一部分&#xff0…

【机器学习】集成学习---Bagging之随机森林(RF)

【机器学习】集成学习---Bagging之随机森林&#xff08;RF&#xff09; 一、引言1. 简要介绍集成学习的概念及其在机器学习领域的重要性。2. 引出随机森林作为Bagging算法的一个典型应用。 二、随机森林原理1. Bagging算法的基本思想2. 随机森林的构造3. 随机森林的工作机制 三…

ClickHouse 如何实现数据一致性

文章目录 ReplacingMegreTree 引擎数据一致性实现方式1.ReplacingMegreTree 引擎2.ReplacingMegreTree 引擎 手动合并3.ReplacingMegreTree 引擎 FINAL 查询4.ReplacingMegreTree 引擎 标记 GroupBy5.允许偏差 前言&#xff1a;在大数据中&#xff0c;基本上所有组件都要求…

Docker创建镜像之--------------基于Dockerfile创建

目录 一、在编写 Dockerfile 时&#xff0c;有严格的格式需要遵循 二、Dockerfile 操作常用的指令 2.1ENTRYPOINT和CMD共存的情形 2.2ENTRYPOINT和CMD的区别 2.3ADD 与COPY的区别 三、Dockerfile案例 3.1构建apache镜像 3.1.1 创建镜像目录方便管理 3.1.2创建编写dock…

深入浅出MySQL-03-【MySQL中的运算符】

文章目录 前言1.算术运算符2.比较运算符3.逻辑操作符4.位运算符5.运算符的优先级 前言 环境&#xff1a; Windows11MySQL-8.0.35 MySQL支持多种类型的运算符&#xff0c;可以用来连接表达式的项。运算符的类型主要包括 算术运算符、比较运算符、逻辑运算符 和 位运算符。 1…

在vue项目中使用TS

在vue项目中使用TS 1. 将vue项目注入ts 引入和使用 webpack的打包配置&#xff1a;vue-cli webnpack 编译时 entry 入口 设置 entry: {app: ./src/maikn.ts }2. resolve: extensions 添加 ts 用于处理尝试的数据尾缀列表 问&#xff1a; 如何在webpack新增处理类型文件&am…

函数递归与迭代

目录 1.递归 1.1递归的思想 1.2递归的限制条件 2.递归与迭代 1.递归 函数递归是什么&#xff1f; 递归是学习C语⾔函数绕不开的⼀个话题&#xff0c;那什么是递归呢? 递归其实是⼀种解决问题的⽅法&#xff0c;在C语⾔中&#xff0c;递归就是函数⾃⼰调⽤⾃⼰。 写⼀个史…

代码随想录算法训练营第五十三天| 1143.最长公共子序列 ,1035.不相交的线,53. 最大子序和 动态规划

题目与题解 1143.最长公共子序列 题目链接&#xff1a;1143.最长公共子序列 代码随想录题解&#xff1a;​​​​​​​1143.最长公共子序列 视频讲解&#xff1a;动态规划子序列问题经典题目 | LeetCode&#xff1a;1143.最长公共子序列_哔哩哔哩_bilibili 解题思路&#xff…

Linux Makefile编写之可执行程序

1 概述 编译工具有很多(make/cmake/BJam)。如果不考虑跨平台的话&#xff0c;还是make比较方便。使用make编译需要编写Makefile。本文编写Makefile来生成C/C可执行程序。 2 Makefile文件命名 Makefile文件首先是一个文本文件&#xff0c;Linux下默认有两种命名方式: Makefil…

DBSCAN算法学习

DBSCAN算法 文章目录 DBSCAN算法概述应用场景优缺点基于sklearn库的样例DBSCAN、分层聚类和K均值聚类比较 概述 DBSCAN算法是一种基于密度的聚类算法&#xff0c;能够自动识别不同的簇&#xff0c;并与噪声数据分开。以下是关于DBSCAN算法的重要知识点概述&#xff1a; 基本概…