如何在React中使用Promise触发HTML Dialog弹窗？

要实现你想要的Promise式弹窗调用，核心思路是让modal.open()返回一个Promise，当用户点击弹窗按钮时，用用户的选择值resolve这个Promise。结合React和HTML Dialog元素，具体实现步骤如下：

1. 创建全局弹窗工具与Modal组件 #

我们需要用React Portal将弹窗挂载到全局容器（比如body下的独立节点），避免被父组件的样式或布局影响，同时封装modal.open方法来管理弹窗的显示和Promise状态：

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';

// 提前在index.html中添加全局弹窗容器：<div id="modal-root"></div>
const modalRoot = document.getElementById('modal-root');
const root = ReactDOM.createRoot(modalRoot);

// Modal组件
function Modal({ title, type, onResolve }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    // 组件挂载后自动打开弹窗
    dialogRef.current?.showModal();
  }, []);

  const handleYesClick = () => {
    dialogRef.current?.close();
    onResolve("YES");
  };

  const handleCancelClick = () => {
    dialogRef.current?.close();
    onResolve("CANCEL");
  };

  return (
    <dialog ref={dialogRef} className={`modal modal-${type.toLowerCase()}`}>
      <h3>{title}</h3>
      <div className="modal-actions">
        <button onClick={handleYesClick}>Yes</button>
        <button onClick={handleCancelClick}>Cancel</button>
      </div>
    </dialog>
  );
}

// 全局弹窗工具
const modal = {
  open(options) {
    return new Promise((resolve) => {
      // 渲染弹窗组件，传入resolve函数作为回调
      root.render(
        <Modal 
          title={options.title} 
          type={options.type} 
          onResolve={(result) => {
            resolve(result);
            // 弹窗关闭后清理渲染内容
            root.unmount();
          }} 
        />
      );
    });
  },
  dismiss() {
    // 手动关闭弹窗并清理组件
    const dialog = modalRoot.querySelector('dialog');
    dialog?.close();
    root.unmount();
  }
};

export default modal;

2. 在页面组件中调用弹窗 #

现在你可以像伪代码里那样，用async/await调用弹窗，等待用户的选择结果：

import modal from './modal';

export function Page(props){
    const handleClick = async () => {
       const response = await modal.open({
           title: "Please fill the form",
           type: "Warning",
       });
       if(response === "YES"){
           console.log("用户选择了Yes，执行操作");
           // 这里编写你的业务逻辑
       }
       else if(response === "CANCEL"){
          modal.dismiss();
       }
    };

    return <button onClick={handleClick}>Click Me!</button>;
}

关键说明 #

• Promise封装：modal.open()返回的Promise会在用户点击按钮时被resolve，传递用户的选择值（"YES"或"CANCEL"）。
• React Portal：将弹窗挂载到独立的modal-root容器，确保弹窗不受父组件的CSS样式、z-index等限制，始终显示在页面最上层。
• 弹窗生命周期：弹窗打开时调用dialog.showModal()，关闭后调用root.unmount()清理组件，避免内存泄漏。

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