react中classNames的作用是什么？

作者站长头像
站长
· 阅读数 17

我在一个代码中有看到使用 classNames("codicon") 创建一个icon：

<ul className={styles.actionsContainer}>
  <li>
    <a
      className={classNames(
        "codicon",
        showPrimarySideBar
          ? "codicon-layout-sidebar-left"
          : "codicon-layout-sidebar-left-off",
        styles.actionLabel
      )}

请问下：

classNames 在这里的作用是什么呢？不用它的话，是否可以直接：className = "xxx" ？那么使用 classNames 的好处是什么？

回复
1个回答
avatar
test
2024-06-28

https://github.com/JedWatson/classnames/blob/main/index.js

这大概就是所有的代码了吧？

// 如果是数字和字符串类型就 push
if (argType === 'string' || argType === 'number') {
                classes.push(arg);
} 
// 如果是数组就递归
if (Array.isArray(arg)) {
  if (arg.length) {
    var inner = classNames.apply(null, arg);
    if (inner) {
        classes.push(inner);
    }
  }
} 
// 如果是对象，就看看能 toString 不，不能的话就遍历（for in），等于把为 true 的 key push 了
if (argType === 'object') {
  if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
      classes.push(arg.toString());
      continue;
  }

  for (var key in arg) {
      if (hasOwn.call(arg, key) && arg[key]) {
          classes.push(key);
      }
  }
}

完整的来看，和 vue 的 :class 支持的差不多吧

[
    'abc',
    ['abcd','abcde'],
    {'is-active': true}
    ['a1',['a2'],{'is-hover': false}],
]
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容