您现在的位置是:网站首页> 内容页

每日质量NPM包-classnames

  • 兴旺官网首页
  • 2019-02-19
  • 237人已阅读
简介一、classnames现在到处都追求效率开发所谓存在即合理各种各样的开源包/项目火热也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了

一、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>//输出

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

<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 >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 >按钮</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》

文章评论

Top