classNames 用法

classNames 是一个非常流行的 JavaScript 库，用于在 React 或其他 JavaScript 项目中条件性地合并和切换 CSS 类名。这个库通常用来简化根据组件的状态或属性决定元素类名的过程。

下面是 classNames 几种常见的使用方式：

基础用法
```
classNames('foo', 'bar'); // => 'foo bar'
```
这里，classNames 函简单地将两个字符串参数合并成一个类名字符串。
条件用法
```
classNames('foo', { 'bar': true, 'duck': false }); // => 'foo bar'
```
在这个例子中，'bar' 类名将被包括因为其对应的值是 true，而 'duck’ 类名不会被包括因为其对应的值是 false。

多条件用法

const buttonType = 'primary';
classNames({ 'btn-default': buttonType === 'default', 'btn-primary': buttonType === 'primary'
}); // => 'btn-primary'

这里，类名是基于某个变量的值来决定的。只有当条件为 true 时，相应的类名才会被添加。

数组用法

const buttonTypes = ['primary', 'bold'];
classNames(buttonTypes); // => 'primary bold'

使用数组参数，classNames 会将数组中的所有项转换为类名。

组合用法
```
classNames('foo', ['bar', { duck: true, quack: false }], 'baz', { bam: null }); // => 'foo bar duck baz'
```
在这个例子中，classNames 接收了混合参数：字符串，数组，以及对象。它会智能地解析每种类型，最终生成一个整洁的类名字符串。

与 React 一起使用

import classNames from 'classnames';const Button = ({ primary, children }) => (<button className={classNames('btn', { 'btn-primary': primary })}>{children}</button>
);// 使用 <Button primary>Click me</Button> 时
// 结果的 className 将是 'btn btn-primary'