Bootstrap 5.2.3可关闭Alert在TypeScript React中无法关闭问题

问题出在你只引入了Bootstrap的CSS，但Bootstrap的交互组件（比如可关闭Alert）依赖它的JavaScript库，没引入的话，data-bs-dismiss="alert"这种属性触发的关闭逻辑根本跑不起来。

下面给两种解决思路：

1. 直接引入Bootstrap JavaScript #

修改main.tsx，添加Bootstrap的JS文件引入（Bootstrap 5依赖Popper，用bundle版本已经包含了Popper，不用单独安装）：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
// 新增：引入Bootstrap完整JS包（包含Popper）
import "bootstrap/dist/js/bootstrap.bundle.min.js";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 用React状态控制Alert显示（推荐） #

React是数据驱动的，用状态管理组件显示隐藏比依赖原生DOM操作更符合React的开发范式，还能避免原生JS和虚拟DOM的冲突。修改App.tsx：

import { useState } from "react";

function App() {
  // 用状态控制Alert是否显示
  const [showAlert, setShowAlert] = useState(true);

  return (
    <>
      {showAlert && (
        <div
          className="alert alert-warning alert-dismissible fade show"
          role="alert"
        >
          <strong>Holy guacamole!</strong> You should check in on some of those
          fields below.
          <button
            type="button"
            className="btn-close"
            aria-label="Close"
            // 点击时更新状态隐藏Alert
            onClick={() => setShowAlert(false)}
          ></button>
        </div>
      )}
    </>
  );
}
export default App;

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