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