在React中使用Bootstrap中的Modal并使用Js控制（非使用Bootstrap-React）

在React中使用Bootstrap框架

---

组件Render

<button className='btn btn-primary btn-sm' onClick={() => openModal()}>详细</button>
<div className="modal fade" id="info-modal" tabIndex={-1} aria-labelledby="" aria-hidden="true">
 <div className="modal-dialog">
  <div className="modal-content">
   <div className="modal-header">
    <h1 className="modal-title fs-5" id="exampleModalLabel">通知详细</h1>
   </div>
   <div className="modal-body">
    ...
   </div>
   <div className="modal-footer">
    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
   </div>
  </div>
 </div>
</div>

用于控制模态框的Js/Ts函数

const openModal = () => {
 const modal = new Modal('#info-modal');
 modal?.show();
}

2024年1月25日补充

在复用型模态框组件控制中，应使用Modal.getOrCreateInstance()代替new Modal()，原因是后者在多次调用（例如在模态框打开后试图使用hide()隐藏时）时会导致创建出与先前不同的实例，导致方法无法执行。