这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

一、前言

在这次青训营项目中，我发现大佬写的组件中，用到了个叫做classnames的组件，可我没用过啊，于是立马去百度了一下，了解了一下大概用法，又来做笔记了。

二、内容

1. 介绍

classnames 是对 React的classname的属性扩展，因为原生的React的并不支持动态的添加多个类名（发现React对css的融入是真的不行）。

2. 使用

# 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

需要使用时导入即可：

import classnames from "classnames";

其最主要的用法就是，用于添加多个类名。
最简单的用法：

import classnames from "classnames";

<div className={classnames("class1","class2")}></div>

这样你就可以得到一个有着两个类名的组件：

<div class="class1 class2"></div>

当然他的能力绝不仅如此，它可以用多种方式添加类名：

{ // 通过对象添加类名 }
<div className={classnames({"hot": true, },{"cold": false, "sunner"})}></div>      { // hot sunner }
{ // 通过数组添加类名 }
<div className={classnames(["abc","def"],["ghi"])}></div>      { // abc def ghi }
{ // undefined null false "" 0 都会被忽略掉 }
<div className={classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, '')}></div>    { // bar 1 }
{ // 可以通过各种组合来拼凑成各种类名 }
<div className={classNames('a', ["b", {"c": false, "d": true}])}></div>      { // a b d }
{ // 最主要的是可以通过props、state等值进行判断来设置类名 }
<div className={classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
})}></div>

它也支持使用 bind来更改指针

import classnames from "classnames";

let styles = {
  foo: 'abc',
  bar: 'def',
  baz: 'xyz'
};
let cx = classNames.bind(styles);
let className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz

三、总结

classnames这个插件我觉得他最好的地方就在于能够动态的去修改组件类名，能玩出更多的花样，且他支持各种多种格式的数据添加类名，是一个很棒的插件。

---

有什么问题希望大家可以在评论区指出，我及时纠正。

新人上路，还请多多包含。 我是MoonLight，一个初出茅庐的小前端。