不使用react-bootstrap npm包在React中触发Bootstrap Modal

因多种原因无法使用npm的react-bootstrap包，尝试通过React状态设置类名的方式实现Bootstrap5 Modal，该方法在NavBar中可正常工作，但在Modal上失效。点击触发按钮仅aria-expanded属性发生变化，Modal无响应。

原代码 #

import React, { useState } from "react";

const Modal = (props) => {
  const [modalTriggered, setModalTriggered] = useState(true);

  const handleModalTrigger = () => setModalTriggered(!modalTriggered);

  return (
    <React.Fragment>
      <button
        onClick={handleModalTrigger}
        aria-expanded={!modalTriggered ? true : false}
        className="btn btn-primary"
      >
        Trigger modal
      </button>

      <div>
        <div className={`modal ${modalTriggered ? "hide" : "show"}`}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Modal title</h5>
                <button type="button" className="btn-close"></button>
              </div>
              <div className="modal-body">
                <p>Modal body text goes here.</p>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" className="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Modal;

问题原因及修复方案 #

1. 类名规则错误：Bootstrap5中hide类已废弃，Modal显示需要同时添加show和d-block类，隐藏时移除这两个类。
2. 初始状态逻辑颠倒：原代码初始状态modalTriggered为true，对应添加hide类，但语义和实际显示逻辑冲突。
3. 缺少交互必要属性：Modal容器需要tabIndex="-1"支持键盘交互，同时缺少遮罩层modal-backdrop。
4. 关闭按钮未绑定状态更新：右上角叉号和底部Close按钮未触发状态切换，点击后无法隐藏Modal。

修复后的代码 #

import React, { useState } from "react";

const Modal = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const toggleModal = () => setIsModalVisible(!isModalVisible);

  return (
    <React.Fragment>
      <button
        onClick={toggleModal}
        aria-expanded={isModalVisible}
        className="btn btn-primary"
      >
        Trigger modal
      </button>

      {/* Modal容器 */}
      <div className={`modal fade ${isModalVisible ? 'show d-block' : ''}`} tabIndex="-1">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Modal title</h5>
              <button 
                type="button" 
                className="btn-close"
                onClick={toggleModal}
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                onClick={toggleModal}
              >
                Close
              </button>
              <button type="button" className="btn btn-primary">
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 遮罩层 */}
      {isModalVisible && <div className="modal-backdrop fade show"></div>}
    </React.Fragment>
  );
};

export default Modal;

关键修改说明 #

• 状态变量名改为isModalVisible，语义更清晰，初始值设为false（默认隐藏）
• Modal容器类名调整为modal fade ${isModalVisible ? 'show d-block' : ''}，d-block强制显示容器，show控制淡入效果
• 添加tabIndex="-1"属性，符合Bootstrap交互规范
• 给所有关闭按钮绑定toggleModal事件，点击后更新状态隐藏Modal
• 根据Modal显示状态渲染modal-backdrop遮罩层

内容的提问来源于stack exchange，提问作者timo.js