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

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
})}
相关推荐
!win !15 小时前
不定高元素动画实现方案(下)
前端·javascript·css
Song5592 天前
elpis框架抽离并发布 SDK-NPM 包
前端
Mintopia3 天前
低代码平台如何集成 AIGC 技术?核心技术衔接点解析
前端·javascript·aigc
Mintopia3 天前
Next.js + AI-SDK + DeepSeek:3 分钟建设属于你的 AI 问答 Demo
前端·javascript·next.js
anyup3 天前
历时 10 天+,速度提升 20 倍,新文档正式上线!uView Pro 开源组件库体验再升级!
前端·typescript·uni-app
_AaronWong3 天前
仿 ElementPlus 的函数式弹窗调用
前端·element
用户21411832636023 天前
AI 当 “牛马”!免费云服务器 + 开源插件,7×24 小时写小说,一晚交出 70 章长篇
前端
IT_陈寒3 天前
React 18新特性全解析:这5个隐藏API让你的性能飙升200%!
前端·人工智能·后端
朦胧之3 天前
【NestJS】项目调试
前端·node.js
!win !3 天前
不定高元素动画实现方案(中)
前端·动画