React中如何在未知基础组件类时添加/移除类名？

要正确控制<Img/>组件的d-none类，同时避免覆盖组件自带的基础样式，你可以参考以下几种实现方式：

方式1：条件传递d-none（推荐） #

当isImageOn为false时添加d-none，为true时不传该类（用undefined让组件忽略这个props，保留自身基础类）：

<Img variant="top" className={!isImageOn ? 'd-none' : undefined} src={dp} />

方式2：模板字符串拼接（适合多自定义类场景） #

如果需要同时添加其他自定义类，用模板字符串拼接，确保基础类不会被清空：

// 示例：同时保留自定义类"profile-img"
<Img 
  variant="top" 
  className={`profile-img ${!isImageOn ? 'd-none' : ''}`} 
  src={dp} 
/>

方式3：类名工具库（复杂场景更清晰） #

如果项目中使用了classnames这类工具库，可以更直观地管理条件类：

import classNames from 'classnames';

<Img 
  variant="top" 
  className={classNames({ 'd-none': !isImageOn })} 
  src={dp} 
/>

为什么原代码有问题？ #

原代码在isImageOn为true时将className设为空字符串，会直接覆盖<Img/>组件自带的基础样式类（大多数UI组件库的组件都会自带基础类），导致组件样式异常。上面的方法都避免了清空className，只在需要时添加d-none，同时保留组件的默认样式。

内容的提问来源于stack exchange，提问作者prem