每日优质NPM包之classnames

微信扫一扫,分享到朋友圈

每日优质NPM包之classnames

一、classnames

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

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

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

二、使用方法

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

先举个小反例吧

错误

import styles from './style.less'

//不允许存在多个变量

正确

import styles from './style.css'
import classNames from 'classnames'

let divClass = classNames({
    'div': true,
    'div1': true
})


//输出class="div div1"

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

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

import from './styles.css'

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

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

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

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

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

归根结底就是 命名
惹的祸

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

// example.less
.title {

}
CSS Modules
; //转换后 =====>
title

以上就是 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 });

通过状态控制样式的 添加删除
,简直不要太方便.从此告别 removeClass
之类方法

结合React用法

动态控制按钮样式

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(
        
) } // 输出====>

结合`CSS Modules`用法

CSS Modules介绍: 《css-modules》

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

云从造“芯”背后,AI 国家队的生态野心

上一篇

两个分类,帮你快速集成支付宝和微信支付

下一篇

你也可能喜欢

每日优质NPM包之classnames

长按储存图像,分享给朋友