一、classnames

现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能仗'包'走天涯

官方定义: A simple JavaScript utility for conditionally joining classNames together.

理解: 帮助你在React项目更好地使用className

二、使用方法

在认识classnames之前,你可能会有一个疑问: 我发誓我现在react自带的`className`用得挺好的,还需要引入classnames吗?

先举个小反例吧

错误

import styles from './style.less'

<div className={styles.div styles.div1}></div> //不允许存在多个变量

正确

import styles from './style.css'
import classNames from 'classnames' let divClass = classNames({
'div': true,
'div1': true
}) <div className={divClass}></div>
//输出class="div div1"

当然,机智的你当然想到了可以用字符串模板解决

<div className={`${styles.div} ${styles.div1}`}></div>

"干嘛弄这么麻烦?直接import './style.css'不就行了?"

import from './styles.css'

<div className="div div1></div>

大兄弟所言甚是.上面只是我在项目中使用antd-proCSS Modules编码方式

简单介绍一下什么是CSS Modules:

由于项目开发逐渐庞大过程中,对于样式有两个不得不考虑的问题(这也是CSS Modules出现的问题)

  • 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;

  • 选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标识,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多。

归根结底就是命名惹的祸

CSS Module就是在对className转换的时候加入一定的规则,使得样式名自动添加一个hash值,确保唯一性

// example.less
.title { }
<div className={styles.title}>CSS Modules</div>; //转换后 =====>
<div class="title___3TqAx">title</div>

以上就是CSS Modules的基本原理.更多用法可以参考:《Ant Design Pro - 样式》

当然说那么多,也是想证明一下classnames的优秀

classnames语法

```
//基础用法
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// 各种各样属性结合

classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// 一些不存在/空的属性会自动忽略

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

//数组会遍历输出

var arr = ['b', { c: true, d: false }];

classNames('a', arr); // => 'a b c'

//字符串模板方式

let buttonType = 'primary';

classNames({ [btn-${buttonType}]: true });


通过状态控制样式的<b>添加删除</b>,简直不要太方便.从此告别`removeClass`之类方法 <h4>结合React用法</h4>
动态控制按钮样式

constructor(arg){

super(arg)

this.state = {
isPressed: false,
isHovered: true
}

}

render(){

var btnClass = classNames({

btn: true,

'btn-pressed': this.state.isPressed,

'btn-over': !this.state.isPressed && this.state.isHovered

});

return(
<div>
<button className={btnClass}>按钮</button>
</div>
)

}

// 输出====> 按钮


<h4>结合`CSS Modules`用法</h4>
CSS Modules介绍:<a href="https://github.com/css-modules/css-modules" target="_blank">《css-modules》</a>

import classNames from 'classnames/bind';

let styles = {

key1: 'div',

key2: 'div1',

key3: 'div2'

};

let cssModulesClass = classNames.bind(styles);

let divClassName = cssModulesClass('key1', ['key2']);

// => "div div1"
```

更多用法可以参考:《npm-classnames》

每日质量NPM包-classnames的更多相关文章

  1. 每日质量NPM包复制_copy-to-clipboard

    一.copy-to-clipboard 官方定义: Simple module exposing copy function 理解: 一个超级简单的复制功能,并且这种方法适用于通过别的事件触发复制功能 ...

  2. 每日质量NPM包事件绑定_bindme(详解React的this)

    一.bindme 官方定义: is a helper to bind a list of methods to an object reference 理解: 因为不推荐在render()里构建函数, ...

  3. 每日质量NPM包模态框_react-modal

    一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...

  4. 每日质量NPM包拖拽文件上传_react-dropzone

    一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...

  5. 如何自己写一个公用的NPM包

    以markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clone ...

  6. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 从0到1发布一个npm包

    从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

  8. Github 持续化集成 工作流 Npm包自动化发布

    Github 持续化集成 工作流 Npm包自动化发布 简介   持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...

  9. npm包与gem包--在线&离线安装

    目录 NPM 在线 离线 GEM 在线 离线 NPM NPM,即为Node的包管理工具,官网为 https://www.npmjs.com/,我们可以在站内搜索所需要的NPM包,了解相关的使用规则 安 ...

随机推荐

  1. linux Vue+nginx+django 实现前后端分离

    示例项目 -- LuffyCity.com 的上线 具体解释,vue前端提供静态页面,且可以向后台发起get,post等restful请求 django后台提供数据支撑,返回json数据,返回给vue ...

  2. python--元组tuple

    元组与列表一样,都是序列.但元组不能修改内容(列表允许) 默认的,元组通过圆括号括起来 1. 使用type函数查看类型 numbers = (1,2,3,4,5,6,7,8,9,0) print(ty ...

  3. git从安装到使用

    一.Git简介 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...

  4. css实现16:9的图片比例

    摘自:https://www.cnblogs.com/caizhenbo/p/css.html 需求: 最近产品要求不管原图的大小是多少,宽度一定,高度要自自适应为16:9. 分析: 对于正常的固定好 ...

  5. 大数据自学3-Windows客户端DbVisualizer/SQuirreL配置连接hive

    前面已经学习了将数据从Sql Server导入到Hive DB,并在Hue的Web界面可以查询,接下来是配置客户端工具直接连Hive数据库,常用的有DbVisualizer.SQuirreL SQL ...

  6. Python Selenium element is not reachable by keyboard

    碰到这个问题,没法解决, 最后这么搞的 pcAction.move_by_offset(571, 534).click().perform() #激活输入框 driver.switch_to.acti ...

  7. Python cv2 OpenCV 中传统图片格式与 base64 转换

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法.通过http传输图片常常将图片数据转换成base64之后再进行传输. Base64简 ...

  8. 利用cookies跳过登陆验证码

    前言在爬取某些网页时,登陆界面时经常遇到的一个坎,而现在大多数的网站在登陆时都会要求用户填写验证码.当然,我们可以设计一套机器学习的算法去破解验证码,然而,验证码的形式多种多样,稍微变一下(有些甚至是 ...

  9. linux中权限对文件和目录的意义

    1.权限对文件的意义: 读:可查看文件的内容 写:可修改文件的内容(但不能删除文件) 执行:可执行文件 2.权限对目录的意义: 读:可以查看目录下的内容,即可以读取该目录下的结构列表 写:可修改目录下 ...

  10. vue.JS 介绍

    vueJS 介绍 首先,vueJS 是我很早之前就想要接触学习的东西,但是呢,一直没时间,主要是在学校,事太多,没心思定下心来学习,我学生生涯的最后一个假期的第一天晚上,万事开头难,那就先写点儿什么东 ...