ReactJS中升级DaisyUI v3后如何控制Modal？

核心问题原因 #

直接通过window.my_modal_5获取DOM元素在React中不可靠——React虚拟DOM的渲染时机可能晚于点击事件触发，或者组件封装后元素不会挂载到全局window对象上。DaisyUI v3改用原生<dialog>元素，必须正确获取DOM引用才能调用showModal()/close()方法。

正确实现方式（使用React Ref） #

用React的useRef钩子获取<dialog>元素的引用，避免直接操作全局对象：

import { useRef } from 'react';

function MyModalComponent() {
  // 创建ref关联dialog元素
  const modalRef = useRef(null);

  const openModal = () => {
    modalRef.current?.showModal();
  };

  const closeModal = () => {
    modalRef.current?.close();
  };

  return (
    <>
      <button className="btn" onClick={openModal}>open modal</button>

      <dialog ref={modalRef} id="my_modal_5" className="modal modal-bottom sm:modal-middle">
        <form method="dialog" className="modal-box">
          <h3 className="font-bold text-lg">Hello!</h3>
          <p className="py-4">Press ESC key or click the button below to close</p>
          <div className="modal-action">
            {/* 带method="dialog"的按钮会自动关闭modal */}
            <button className="btn">Close</button>
            {/* 也可以手动绑定自定义关闭逻辑 */}
            {/* <button className="btn" onClick={closeModal}>手动关闭</button> */}
          </div>
        </form>
      </dialog>
    </>
  );
}

export default MyModalComponent;

额外注意事项 #

• 确认项目已安装兼容的DaisyUI v3与Tailwind CSS版本，避免版本冲突
• 原生<dialog>元素的close事件可用于监听模态框关闭动作：

  <dialog 
    ref={modalRef} 
    id="my_modal_5" 
    className="modal modal-bottom sm:modal-middle"
    onClose={() => console.log('模态框已关闭')}
  >
    {/* ... */}
  </dialog>
  

内容的提问来源于stack exchange，提问作者Md. Ta-Seen Fuad Jeem