ReactJS：使用点运算符有条件地添加类名

对于 ReactJS，我使用 SCSS。我使用import classes from './component1.module.scss';然后使用访问类名className={classes.password}。但是，如何根据这种格式的条件动态向元素添加更多类？

查看完整描述

3 回答

撒科打诨

TA贡献1934条经验获得超2个赞

虽然三元运算符可以解决此问题，但如果您有多个需要使用此类逻辑的实例，则可以创建一个函数来接受类名列表并返回真值。

const cx = (...args) => args.filter(Boolean).join(' ')

<Component className={cx(classes.password, special && classes.specialPassword)} />

如果您不想编写自己的cx函数，您还可以使用以下提供相同功能和更多功能的库之一：

反对回复 2024-01-18

HUH函数

TA贡献1836条经验获得超4个赞

只需在${}中使用反引号和三元运算符并在其中执行条件即可。

className={`${props.password ? classes.password : '404class'}`}
className={`${props.password && classes.password}`}

反对回复 2024-01-18

aluckdog

TA贡献1847条经验获得超7个赞

这就是我们如何通过 JSX 实现这一目标的。

className={`${isStateValue ? classes.password: classes.password2 classes.password3}`}

这是正在使用的三元运算符。如果您有更多条件，您甚至可以使用嵌套三元。

反对回复 2024-01-18

热搜