reactjs - 如何在React中使用clsx

我试图理解在为React中的组件分配类名时使用clsx的方法。

构造

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

很清楚。如果 bool(boolean) 值“open”的值为true，则将应用“classes.menuButton”，并且还将应用“classes.hide”。

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

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

这将应用“classes.appBar”。但是第二个参数的含义是什么？

最佳答案

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插值。因此，您不必一定使用它来有条件地应用类。
您可以在官方docs中检查许多受支持的语法
代替

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

你可以这样使用

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

return <div className={style} />

关于reactjs - 如何在React中使用clsx，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57557271/