ReactJS:使用点运算符有条件地添加className

Question

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

Answer 1

虽然三元运算符可以实现这一点，但如果您有多个实例需要使用这种类型的逻辑，则可以创建一个函数，该函数将接受类名列表并返回truthy值。

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

这就是我们如何从JSX实现这一点。

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

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

Answer 3

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

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