每日質量NPM包-classnames

1、classnames

如今處處都追求效率開發,所謂存在即合理,各類各樣的開源包/項目火熱,也是由於他們大大解決了以前複雜的邏輯.做爲榜上前10的熱門包:classnames.還真須要瞭解瞭解它才能仗'包'走天涯

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

理解: 幫助你在React項目更好地使用className

2、使用方法

在認識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 });

經過狀態控制樣式的添加刪除,簡直不要太方便.今後告別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(
        <div>
            <button className={btnClass}>按鈕</button>
        </div>
    )
}


// 輸出====> <button class="btn btn-over">按鈕</button>

結合`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 className={divClassName}></div>// => "div div1"

更多用法能夠參考:《npm-classnames》