简介
在前端开发中，我们经常需要动态地添加或移除元素的 class，以实现布局或样式的变化。但是，在实践中，频繁地操作 DOM 是消耗时间和性能的，这时候，我们需要一个方便、可靠、高效的工具来处理这个问题。
@sindresorhus 是一个著名的 npm 包作者，他开发的 @sindresorhus/class-names 就是一个优秀的解决方案。本文将为你详细介绍如何使用这个 npm 包。
安装
首先，我们需要通过 npm 安装这个包：
npm install @sindresorhus/class-names
如果你使用 yarn，则可以使用以下命令：
yarn add @sindresorhus/class-names
安装完成后，我们就可以引入包了：
import classNames from '@sindresorhus/class-names'
使用方法
@sindresorhus/class-names 提供的是一个函数，它可以方便地处理传入的参数，并返回一个符合规范的字符串。
基本用法
最基本的用法就是传入一个或多个字符串作为参数，函数会自动过滤掉其中的空字符串，并组成一个字符串，以空格分隔。例如：
classNames('foo', 'bar', '', 'baz')
// => 'foo bar baz'也可以把字符串名字放在对象里，然后对象的键与值的值为 true 时，对应的 keys 值组成一个字符串。如果值不是 true，则键被忽略。
classNames({ foo: true, bar: false, baz: true})
// => 'foo baz'简写形式
我们还可以使用简写形式，直接将多个参数作为一个数组传入：
classNames(['foo', 'bar'], ['baz', 'qux']) // => 'foo bar baz qux'
条件判断
@sindresorhus/class-names 还提供了一种方便的条件判断写法，可以通过在对象中传入一个函数，根据函数的返回值来判断键是否应该被包含。例如：
let count = 3
classNames({
'success': count === 3,
'warning': count !== 3,
'error': count < 3
})
// => 'success'示例代码
最后，让我们看一下一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ---------- ---- ---------------------------
------ ------- -------- -------- ----- ----- -------- --------- --------- -------- -- -
----- --------- - -----------
---------
---- -- -----------------
---- -- ----------------- - --------- - ------------------
-------- -- -----------------
-
------ -
------- --------------------- ------------------- -----------
----------
---------
-
-这里我们定义了一个 Button 组件，通过传入不同的参数，可以生成不同样式的按钮。我们使用 @sindresorhus/class-names 来处理 className，代码看起来很简洁明了。
结论
@sindresorhus/class-names 是一个非常实用的 npm 包，可以方便地处理类名字符串，让我们的开发过程更加高效、灵活和优雅。希望本文对您有所帮助，感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155720