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

Question

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

Answer 1

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

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

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

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

1. https://www.npmjs.com/package/classnames

2. https://www.npmjs.com/package/clsx

Answer 2

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

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

Answer 3

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

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

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