我试图理解在为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/

10-10 11:09