前言
本文主要讲解 classnames 相关的知识点。
对 classnames 用法做了详细介绍。
对 classnames 源码，按照功能模块进行解读。尤其对于源码中关键代码从实现层面做了解读。
在总结过程中，对 CSS-in-JS 写法有了不同的想法，结合大佬的文章，将想法记录在了文末。
文章速读
阅读本篇文章，你将有如下图中的收获：
听说你叫 className
讲 classnames 之前，科普一点关于它「兄弟」 className 的知识点。
万物皆有源之 JSX
众所周知，在 Recat 中配合使用 JSX 语法。而 JSX 在语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称。
因此，在 React 中使用 className 为元素指定 CSS 的 class。
className 的两种用法
我们在 React 中是这样为元素添加样式的：
<div className="mt20">Hello World</div>或者根据某个变量的值进行动态绑定，如下就根据 selected 的值判断是否为元素添加 active 样式：
<div className={`${selected ? 'active' : ''}`}>
{selectedText}
</div>必有但是
动态绑定的方式确实让代码变得更加灵活，但是上面这种 ES6 模板字符串的写法，当有多个判断的时，会显得臃肿且不好维护。
那，有没有更好的实现方案呢？
classnames 出现的契机
每当遇到一个新知识点，我总是不由的想，它为什么会诞生？它帮忙解决了什么问题？
开发者需要什么？
从前面的文字中提取关键讯息，不难发现，开发者需要更简洁的绑定多个 className 的方式。
classnames 是什么？
而 classnames 源码的第一句介绍，正好符合开发者的需要：
A simple JavaScript utility for conditionally joining classNames together.
直译过来就是
一个简单的、有条件的绑定多个 className 的 JavaScript 实用函数.
classnames 的用法
用前先安装
classnames 是一个第三方 JavaScript 库，使用前需要先安装。
npm、bower、yarn三件套
# via npm
npm install classnames
# via Bower
bower install classnames
# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames语法
classnames 函数支持多个传参，参数的类型也支持数值、字符串、对象、数组等多种。
classnames(class1,class2,...classN)用法很多样
基础用法
// 多个字符串 两种写法均可
classNames('mt10', 'font20') // => 'mt10 font20'
classNames('mt10 font20') // => 'mt10 font20'
//「字符串+对象」组合
classNames('switch', { selected: false }) // => 'switch'
classNames('switch', { selected: true }) // => 'switch selected'
// 对象 三种写法均可
classNames({ switch: true }, { selected: true }); // => 'switch selected'
classNames({ switch: true, selected: true }); // => 'switch selected'
classNames({ 'switch selected': true }); // => 'switch selected'
// 数组
classNames('font20', ['mt10', { switch: true, selected: false }]); // => 'font20 mt10 switch'ES6 语法
支持动态类名
let type = 'disabled';
classNames('radio', { [`radio-${type}`]: true }); // => 'radio radio-disabled'
classNames('radio', `radio-${type}`); // => 'radio radio-disabled'React 中使用
前面提到过 className 的知识点，React 中添加 class 使用 className。
import classNames from 'classnames';
const checkboxCls = classNames('checkbox-group', { 'checkbox-group-horizontal': true });
<div className={checkboxCls}></div>小结
- classnames 支持多种写法。
- classnames 函数的入参是无序的，但是编写习惯是字符串类型的放前面，其他放在后面。
- classnames 函数会忽略入参中的错误值。
- classnames 函数支持动态类名。
classnames 的原理
源码目录
功能模块
目录结构
classnames
┣
标签：function,精读,classnames,js,classNames,源码,arg,true
From： https://blog.51cto.com/u_15838863/6475617