实习小记(类名添加问题)&&运算符返回结果

className={uploadedImg ${selected && 'selected'} ${disabled && 'disabled-style'}} 这样写会存在什么问题

ChatGPT said:

你这样写是能用的,但有一个潜在的问题 :当 selecteddisabledfalse 时,它们的位置会被渲染成字符串 "false",最终 className 里可能会出现:

ini 复制代码
html
CopyEdit
class="uploadedImg false false"

虽然浏览器会忽略 "false" 这个不存在的类名,但这是不必要的无效 class,可能会:

  1. 让 HTML 看起来杂乱。
  2. 给调试带来困扰(你在 DevTools 里会看到 false 这个 class,会误以为哪里有问题)。

改进写法

✅ 用数组 + .filter(Boolean)

sql 复制代码
jsx
CopyEdit
className={[
  'uploadedImg',
  selected && 'selected',
  disabled && 'disabled-style'
].filter(Boolean).join(' ')}

这样 falsenullundefined 都会被过滤掉,class 里只会有生效的类名。


✅ 或用 classnames 库(推荐,干净又直观):

javascript 复制代码
jsx
CopyEdit
import classNames from 'classnames';

className={classNames('uploadedImg', {
  'selected': selected,
  'disabled-style': disabled
})}
相关推荐
龙在天8 分钟前
如何做虚拟滚动列表缓冲区?流畅又不出现白屏
前端
跟橙姐学代码9 分钟前
PyInstaller打包避坑全攻略:新手一看就会,老手也能涨姿势
前端·python·ipython
FanetheDivine9 分钟前
在react中处理输入法合成问题
前端·react.js
yinuo15 分钟前
Uni-App跨端开发实战:编译H5跳转全平台终极指南(03)
前端
天蓝色的鱼鱼16 分钟前
为什么 Vite 选择 Rolldown?一次关于性能、生态与未来的深度权衡
前端·vite
郭邯19 分钟前
vant-weapp源码解读(2)
前端
用户857594145002920 分钟前
面试官问你:flex:0 和 flex:auto 的区别?你该如何回答?
前端
渊不语26 分钟前
React + Webpack + React Router + TypeScript + Ant Design 多子项目工程化
前端
路修远i27 分钟前
项目中JSSDK封装方案
前端·架构
一蓑烟雨,一任平生28 分钟前
h5实现内嵌微信小程序&支付宝 --截图保存海报分享功能
开发语言·前端·javascript