React好用类名管理小工具:classnames

server/2024/12/18 16:02:42/

 classnames 是一个在 React 开发中非常流行的 JavaScript 工具库,它可以帮助开发者有条件地连接类名字符串,简化动态添加或删除类名的过程。

  

目录

一、 安装

二、导入

三、使用 

四、选项卡应用


一、 安装

npm install classnames --save

二、导入

 React 项目中使用时,需要先导入 classnames

import classnames from 'classnames';

三、使用 

  • 普通字符串粘合:将参数拼接为字符串,中间用空格分开:
    const className = classnames('foo', 'bar'); // => 'foo bar'
  • 带条件的类参数:第二个参数是对象类型,键值为 true 则粘合进类名中;若为 false,则不粘合:
    const className = classnames('foo', { bar: true }); // => 'foo bar'
    const className = classnames('foo', { bar: false }); // => 'foo'
  • 参数类型是数组:数组可以递归展开数组中的每一项:
    const className = classnames('a', ['b', { c: true }, { d: false }]); // => 'a b c'
  • 特别注意null 和 undefined 会被忽略:
    const className = classnames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

四、选项卡应用

 比如我们要实现一个选项卡的切换效果:

 其核心代码就是:

className={`item ${liColor === item.type ? 'active' : ''}`}

判断选项卡选项自身属性和被点击的选项卡选项传入的属性是否相等?

如相等,则获得特殊的类名,如果不相等,则失去类名

我们能否更加简洁的编写这句表达式呢?

将原来的代码改成classnames的写法

原来:

className={`item ${liColor === item.type ? 'active' : ''}`}

改成: 

className={classnames('item', { active: liColor === item.type })}

 完整代码实现

import { useState } from 'react';
// 6、引入classnames库
import classnames from 'classnames';
export default function UseStateDemo() {let [count, setCount] = useState(0);let [obj, setObj] = useState({ name: '张三', age: 18 })// 1、存储列表选项的值let [arrData, setArrData] = useState([{ type: 'A', value: '选项1' }, { type: 'B', value: '选项2' }])// 2、存储选颜色的值let [liColor, setLiColor] = useState('A')const fn = (type) => {setLiColor(type)}return (<><ul className="flex">{arrData.map((item, index) => {// 3、点击谁就把参数携带进去return <li onClick={() => fn(item.type)}// 5、安装插件npm install classnames// className={`item ${liColor === item.type ? 'active' : ''}`}// 7、使用classnames插件className={classnames('item', { active: liColor === item.type })}key={item.value}>{item.value}</li>})}</ul ></>)
}


http://www.ppmy.cn/server/151213.html

相关文章

【Java】正则表达式基础题+场景题练习

基础语法可以看我另一篇博客&#xff1a;正则表达式【规则】【实例】【技巧】_正则规则-CSDN博客 输出结果全是true public class StringRegexTest {public static void main(String[] args) {System.out.println(matchSingleNum("1"));System.out.println(matchMul…

运筹说 第130期 | 对策论引言

通过对对策论基础知识进行梳理和总结&#xff0c;小编绘制了《对策论思维导图》&#xff0c;如下图所示&#xff0c;对策论章节一共包含4个小节。 第1小节是对策论引言。介绍了对策论的基本概念&#xff0c;包含对策行为和对策论、对策现象的三要素、对策问题举例及对策的分类…

使用 XAML 和 C# 旋转 3D 立方体

此示例演示如何使用 XAML 显示和旋转 3D 立方体。它显示一个带有滚动条的蓝色三维立方体&#xff0c;您可以使用滚动条旋转立方体以从不同方向查看它。 下面显示了该程序的完整 XAML 代码。XAML 代码处理所有用户交互&#xff0c;包括旋转立方体&#xff0c;因此该示例不需要任…

winlogon!InitializeGlobals函数中的g_IsTerminalServer

winlogon!InitializeGlobals函数中的g_IsTerminalServer BOOL InitializeGlobals(HINSTANCE hInstance) { SID_IDENTIFIER_AUTHORITY SystemSidAuthority SECURITY_NT_AUTHORITY; ULONG SidLength; TCHAR szComputerName[MAX_COMPUTERNAME_LENGTH1]; DWORD dw…

[论文阅读]What Was Your Prompt? A Remote Keylogging Attack on AI Assistants

What Was Your Prompt? A Remote Keylogging Attack on AI Assistants http://arxiv.org/abs/2403.09751 研究背景和问题&#xff1a; &#xff08;1&#xff09; 实际应用场景和问题提出 大型语言模型 &#xff08;LLM&#xff09; 和基于聊天的 AI 服务&#xff08;如 C…

一个免费好用的魔法

前不久发表了一个可以永久免费魔法才发表十几天就有1W人浏览&#xff0c;下载的人也有几百&#xff0c;但是老是被审核员针对被封了几天号&#xff0c;现在是发不出来的了 若是想要免费永久加速器的加联系方式&#xff0c;&#xff08;需要支付俩块来支持一下&#xff0c;感谢支…

游戏关卡分析:荒野大镖客2雪山终战

1、相关剧情 主角约翰一家在农场过着悠闲的日子&#xff0c;突然平静被打破&#xff0c; 女枪手来报信&#xff0c;在某小镇找到了迈卡的消息。 于是激发了约翰的满腔怒气&#xff0c;不顾妻子的反对&#xff0c;坚决要出战&#xff0c; 要彻底歼灭迈卡&#xff0c;为亚瑟…

java服务器中,如何判定是该使用单例系统,还是微服务架构,多库分布式,服务分布式,前端分布式

在设计Java服务器架构时&#xff0c;选择单例系统、微服务架构、多库分布式、服务分布式还是前端分布式&#xff0c;需要根据具体的业务需求、技术栈、团队规模和项目复杂度等因素进行综合考虑。以下是各个架构模式的适用场景和优缺点分析&#xff0c;帮助你做出决策。 1. 单例…