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