在 React 开发中，经常需要根据不同的状态来动态设置组件的 className，以实现一些样式上的变化。react-classnamed 就是一个方便的 npm 包，可以帮助我们快速生成这样的 className。
安装
首先，在项目目录下执行以下命令安装 react-classnamed：
npm install react-classnamed --save
使用
在需要使用的组件中引入 react-classnamed：
import cn from 'react-classnamed';
使用方法
react-classnamed 的使用非常简单。我们只需要传入一个对象，对象的属性名代表不同的状态，属性值为布尔值，表示该状态是否激活。
let isActive = true; <div className={cn({ active: isActive, 'not-active': !isActive })}> Hello World! </div>
上述代码中，当 isActive 为 true 时，该 div 元素的 className 会自动添加 active，而当为 false 时，则添加 not-active。
可选参数
除了上述必选参数外，cn 函数还接受两个可选参数：
cn(classes?: Object, defaultClasses?: string)
- classes：额外的 className 对象，可以用来覆盖原有的 className；
- defaultClasses：用来设置默认的 className。
示例
下面是使用 react-classnamed 的一个例子，根据鼠标是否悬停在按钮上来改变按钮的外观：
-- -------------------- ---- ------- ------ -- ---- ------------------- ------ -------------- -- ----- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ------ ----- -- - --------------- - -- -- - --------------- ------ ---- --- - -------------- - -- -- - --------------- ------ ----- --- - -------- - ----- - ----- - - ----------- ------ - ------- --------------- --------------- ----- -- ---- --------- --------------------- ----- -- -- -- -------- --------- --- ---------------------------------- -------------------------------- - ----- --- --------- -- - -展开代码
注意，这里我们使用了一个样式表文件，文件名为 style.css：
-- -------------------- ---- ------- ------------- - ----------------- ------ ------- --- ----- ------ -------- ----- - ------------------- - ----------------- ---------- -展开代码
总结
react-classnamed 是一个非常方便的 npm 包，可以帮助我们快速生成动态的 className，根据不同的组件状态来添加不同的样式，它的使用方法和接口都非常简单明了。如果你在开发中也遇到了这样的需求，不妨试试使用 react-classnamed，相信它会让你的开发效率更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66eae
