react中classNames的作用是什么？

Question

我在一个代码中有看到使用 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 的好处是什么？

Answer 1

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}],
]