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

Question

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

Answer 1

虽然三元运算符可以解决此问题，但如果您有多个需要使用此类逻辑的实例，则可以创建一个函数来接受类名列表并返回真值。const&nbsp;cx&nbsp;=&nbsp;(...args)&nbsp;=>&nbsp;args.filter(Boolean).join('&nbsp;') <Component&nbsp;className={cx(classes.password,&nbsp;special&nbsp;&&&nbsp;classes.specialPassword)}&nbsp;/>如果您不想编写自己的cx函数，您还可以使用以下提供相同功能和更多功能的库之一：https://www.npmjs.com/package/classnameshttps://www.npmjs.com/package/clsx

Answer 2

只需在${}中使用反引号和三元运算符并在其中执行条件即可。className={`${props.password&nbsp;?&nbsp;classes.password&nbsp;:&nbsp;'404class'}`} className={`${props.password&nbsp;&&&nbsp;classes.password}`}

Answer 3

这就是我们如何通过 JSX 实现这一目标的。className={`${isStateValue&nbsp;?&nbsp;classes.password:&nbsp;classes.password2&nbsp;classes.password3}`}这是正在使用的三元运算符。如果您有更多条件，您甚至可以使用嵌套三元。