React添加Bootstrap badge类后元素隐藏消失问题如何解决

这个问题和React、浏览器版本无关，核心原因是你使用了Bootstrap 4版本的徽章类名写法，和当前安装的Bootstrap 5.1.3版本的类名规则不兼容：

• Bootstrap 4版本中，徽章组件的样式规则是badge基础类 + 带颜色后缀的badge-*类（比如badge-primary、badge-dark），添加后会自动给元素设置对应背景色和文字色。
• Bootstrap 5从正式版发布开始就调整了徽章组件的类名规则：移除了所有自带颜色属性的badge-*类，仅保留badge基础类，徽章的颜色需要搭配通用背景工具类bg-*实现。
• 你当前写的badge badge-primary badge-dark类名中，只有badge和间距类m-2能在Bootstrap 5.1.3中生效：badge类会默认给元素设置白色文字样式，但badge-primary、badge-dark在当前版本里没有任何对应的样式规则，不会给元素加背景色，最终就会出现白字配页面默认白底的效果，视觉上完全看不到元素，但元素本身确实存在于DOM结构中，和你观察到的现象完全吻合。

把span标签上无效的旧版类名替换为Bootstrap 5适配的类名即可，基础写法为badge基础类 + bg-*背景色类 + 自定义间距/圆角等工具类。
举两个常用场景的示例：

1. 你原本想要的深色徽章效果，代码修改为：

<span className="badge bg-dark m-2">{this.formatCount()}</span>

2. 如果需要蓝色主色调徽章，把背景类替换为bg-primary即可：

<span className="badge bg-primary m-2">{this.formatCount()}</span>

补充说明：如果后续升级到Bootstrap 5.2及以上版本，更推荐使用text-bg-*组合类（比如text-bg-dark）替代单独的bg-*类，框架会自动根据背景色匹配对比度达标的文字颜色，不需要手动调整文字色。

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