React中如何点击按钮打开Bootstrap Modal及模态框不显示问题排查

问题原因 #

• Bootstrap 原生的.modal类默认设置了display: none，仅渲染组件不会触发显示，你需要额外给模态框添加.show类、设置display: block，同时给<body>添加.modal-open类才会正常展示。
• 你当前把模态框组件放在.row节点下，如果父节点存在overflow: hidden或者定位限制，模态框很可能被裁切或者定位异常，建议将模态框移到组件外层，避免被父节点样式影响。
• 如果你没有引入 Bootstrap 原生 JS 文件，data-bs-dismiss这类属性不会自动绑定关闭事件，需要你自己实现关闭逻辑。
• ModalContent组件内部直接使用了modalInfo变量，你没有将它作为props传入，大概率会抛出未定义报错，也会导致组件渲染失败。

修复代码示例 #

父组件逻辑调整

// 父组件内先定义控制模态框的state和处理函数
const [show, setShow] = useState(false);
const [modalInfo, setModalInfo] = useState('');

const handleShow = (info) => {
  setModalInfo(info);
  setShow(true);
  // 显示时给body加类，控制页面滚动
  document.body.classList.add('modal-open');
}

const handleClose = () => {
  setShow(false);
  document.body.classList.remove('modal-open');
}

// 渲染部分，建议把模态框移到外层
return (
  <>
    <div className="row">
      <div className="col">
        <table className="table table-hover">
          {/* 你的表格内容，点击按钮触发handleShow即可 */}
          <button onClick={() => handleShow('测试内容')}>打开模态框</button>
        </table>
        <Pagination 
          itemsCount={filtered.length}
          pageSize={pageSize}
          currentPage={currentPage}
          onPageChange={handlePageChange}
        />
      </div>
    </div>
    {/* 模态框移到row外面，避免父元素样式影响 */}
    {show && <ModalContent modalInfo={modalInfo} onClose={handleClose} />}
    {/* 模态框背景蒙层 */}
    {show && <div className="modal-backdrop show"></div>}
  </>
)

ModalContent组件调整

// 接收props
const ModalContent = ({ modalInfo, onClose }) => {
    return (
        {/* 动态添加show类，设置display:block */}
        <div className="modal show" style={{display: 'block'}}>
          <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" 
                  aria-label="Close"
                  onClick={onClose}
                ></button>
              </div>
              <div className="modal-body">
                <p>Modal body text goes here. {modalInfo}</p>
              </div>
              <div className="modal-footer">
                <button 
                  type="button" 
                  className="btn btn-secondary"
                  onClick={onClose}
                >Close</button>
                <button type="button" className="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
    );
}

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