如何在 React 中使用 clsx

Question

我试图了解 clsx 在将类名分配给 React 中的组件时的一些用途。

构造

className={clsx(classes.menuButton, open && classes.hide)}

很清楚。它应用 ‘classes.menuButton’，如果布尔值 ‘open’ 的值为真，也应用 ‘classes.hide’。

我的问题与第二个示例有关：

 className={clsx(classes.appBar, {[classes.appBarShift]: open })}

这将应用“classes.appBar”。但是第二个参数是什么意思呢？

原文由 millport 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

clsx 一般用于有条件地应用给定的 className

此语法意味着仅当给定条件评估为 true 时才会应用某些类

const menuStyle = clsx({
    [classes.root] : true, //always applies
    [classes.menuOpen] : open //only when open === true
})

在此示例中 [classes.menuOpen] （将评估为 randomclassName123 ）仅在 open === true 时应用

---

clsx 基本上输出一个 字符串插值。因此，您不必一定要使用它。

您可以在官方 文档 中查看许多受支持的语法

代替

<div className={`${classes.foo} ${classes.bar} ${classes.baz}`} />

你可以像这样使用它

const { foo, bar, baz } = classes
const style = clsx(foo, bar, baz)

return <div className={style} />

原文由 Dupocas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

许多人已经很好地解释了它。我仍然想添加一个包含 className 的示例。在示例中，您可以看到不同的类，如果给定条件的计算结果为真，则应用这些类。在示例中，您可以应用具有布尔值、布尔变量或比较字符串（如果匹配，则返回 true）的类。类 classes.drawer 始终应用并且不依赖于条件。

 className={clsx(classes.drawer, {                  // classes.drawer is applied always
          [classes.drawerOpen]: true,              // classes.drawerOpen is applied always, bool = true
          [classes.drawerClose]: !open,            // you can also use boolean variable
          [classes.drawerRed]: colorVar === 'red', // you can also use string variable
        })}

原文由 Amel 发布，翻译遵循 CC BY-SA 4.0 许可协议