React中Bootstrap Alert组件仅显示纯文本，求问题原因及解决方法

嘿，我来帮你搞定这个Alert组件只显示纯文本的问题，主要有两个核心原因：

1. React-Bootstrap与Bootstrap版本不兼容 #

你当前用的react-bootstrap@0.30.3是专门为Bootstrap 3设计的版本，但你的package.json里装的却是bootstrap@4.4.1（Bootstrap 4版本），这两个版本的样式类名、布局逻辑差异很大，直接混用就会导致样式完全不生效。

解决方式二选一： #

• 方案A：降级Bootstrap到3.x版本
  在终端执行命令安装兼容的Bootstrap 3版本：

  npm install bootstrap@3.4.1 --save
  

• 方案B：升级React和React-Bootstrap到兼容Bootstrap 4的版本
  因为react-bootstrap@0.30.3只支持React 15.x，如果你想继续用Bootstrap 4，需要升级React到16+，同时安装适配Bootstrap 4的React-Bootstrap版本（比如1.x系列）：

  npm install react@^16.0.0 react-dom@^16.0.0 react-bootstrap@^1.6.0 --save
  

2. 未引入Bootstrap的CSS文件 #

React-Bootstrap只是封装了Bootstrap的组件逻辑，本身并不包含样式文件，必须手动引入Bootstrap的CSS才能让组件渲染出正确的样式。

解决方式： #

在你的项目入口文件（比如index.js或者App.js）顶部添加以下导入语句：

import 'bootstrap/dist/css/bootstrap.min.css';

把这两个问题解决后，你的Alert组件应该就能正常显示警告样式啦！

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