如何在 React 中使用 clsx

Posted 2023-02-22

【中文标题】如何在 React 中使用 clsx

【英文标题】：How to use clsx in React

【发布时间】：2019-12-24 16:54:50

【问题描述】：

我正在尝试了解 clsx 在为 React 中的组件分配类名时的一些用途。

结构

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

够清楚了。它应用 'classes.menuButton'，如果布尔值 'open' 的值为 true，也应用 'classes.hide'。

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

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

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

【参考方案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 基本上输出一个string interpolation。所以你不必一定要使用它，尽管这是一种常见的做法。

有很多支持的语法可以查看官方docs

代替

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

你可以这样使用它

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

return <div className=style />

【讨论】：

谢谢。如果我理解正确，那么 'open && classes.menuOpen' 与 '[classes.menuOpen] : open' 的效果完全相同。

是的。它们只是实现相同结果的两种不同方法

再次感谢。最后评论 - 构造 'className=clsx(classes.appBar, [classes.appBarShift]: open )' 与 'className=clsx(classes.appBar, classes.appBarShift: open )'。只有当有多个规则依赖于 open 的值时，才真正需要该数组。

是的。您可以检查clsx here 的所有可能的sintaxes

否...数组语法适用于动态键：***.com/a/19837961/3494249 classes.appBarShift: open 会导致错误； [classes.appBarShift]: open 将创建一个对象，其值为 classes.appBarShift 作为键。

【参考方案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
        )

【讨论】：

您能否为您的代码添加一些解释？ Code-only answers may fall under 'Very Low Quality' ...and are candidates for deletion....We've always touted that we aren't a code factory. We are the people who teach others to fish. Code-only answers only feed a person for a day

【参考方案3】：

classes.appBarShift 仅在 open 计算结果为 true 时应用。如果数组有更多类，如果open 评估为true，则将应用所有这些类