了解React中clsx的用法

一尘不染

reactjs

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

构造

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

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

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

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

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

阅读 3984

2020-07-22

共1个答案

一尘不染

这用于动态数组classNames（jss例如，使用）时。这意味着只有在给定条件评估为true

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

在此示例中[classes.menuOpen]（将评估为randomclassName123）仅在以下情况下适用open === true

clsx基本上执行string插值，因此您不必一定要使用它来有条件地应用类。您可以在官方文档中查看许多受支持的语法

代替

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

你可以像这样使用它

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

return <div className={style} />

2020-07-22