基于React实现：弹窗组件与Promise的有机结合

typescript
import { ReactNode } from "react";
import { Button } from "antd";
import "./index.css";

interface ModalOption {
  title: ReactNode;
  content: ReactNode;
  okText?: string;
  cancelText?: string;
}

interface ReconfirmModalProps {
  onConfirm: () => void;
  onClose: () => void;
  options: ModalOption;
}

function ReconfirmModal(props: ReconfirmModalProps) {
  const { onConfirm, onClose, options } = props;
  const { title, content, okText, cancelText } = options;
  return (
    <div className="reconfirm-modal" style={{ zIndex: 10001 }}>
      <div className="reconfirm-modal-body" style={{ width: 400 }}>
        <p className="reconfirm-modal-title">{title}</p>

        <p className="reconfirm-modal-content">{content}</p>

        <div className="reconfirm-modal-footer">
          <Button size="large" onClick={onClose} block>
            {cancelText || "取消"}
          </Button>
          <Button type="primary" size="large" block onClick={onConfirm}>
            {okText || "确认"}
          </Button>
        </div>
      </div>
    </div>
  );
}

引用二次确认弹窗，进行简单交互

typescript
export default function ReconfirmModalPage() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <Button danger onClick={() => setVisible(true)}>
        删除
      </Button>
      {visible && (
        <ReconfirmModal
          onConfirm={() => {
            setVisible(false);
            alert("点击了确认按钮");
          }}
          onClose={() => {
            setVisible(false);
            alert("点击了取消按钮");
          }}
          options={{ title: "删除提示", content: "确认删除吗？" }}
        />
      )}
    </div>
  );
}

看看展示效果

有机结合Promise

我们需要梳理清晰我们的目的，然后再动手进行实现，通过理论指导实践。

首先创建一个方法，调用这个方法时唤醒二次确认弹窗，同时这个方法需要返回二次确认弹窗的交互结果。

通过ReactDOM.render方法将弹窗组件挂在到新创建的root节点上，将Promise的resolve方法传递给弹窗组件的两个按钮事件，此时用户点击按钮时即触发resove方法，Promise状态就从pending状态转移到fulfilled状态。

调用该方法的宿主方法即可得到用户点击二次确认弹窗的点击结果，我们的目的也就达到了。

tsx
export const openReconfirmModal = (options: ModalOption) => {
    return new Promise((resolve) => {
        const root = document.createElement('div')
        document.body.appendChild(root)

				// 移除react组件和DOM节点
        const removeModal = () => {
            ReactDOM.unmountComponentAtNode(root)
            document.body.removeChild(root)
        }

				// 点击取消按钮
        const onClose = () => {
            removeModal()
            resolve(false)
        }

	      // 点击确认按钮
        const onConfirm = () => {
            removeModal()
            resolve(true)
        }

        ReactDOM.render(createElement(ReconfirmModal, { onClose, onConfirm, options }), root)
    })
}

调用二次确认弹窗方法

json
function ReconfirmModalPage() {

  const handlePromseReconfirm = async () => {
		// !!! **直接这么调用就完事儿，简单直接**
    const res = await openReconfirmModal({
      title: "删除提示",
      content: "确认删除吗？",
    });
    if (res) {
      alert("点击了确认按钮");
    } else {
      alert("点击了取消按钮");
    }
  };

  return (
      <Button danger type="primary" onClick={handlePromseReconfirm}>
        Promise模式删除
      </Button>
  );
}

缺点分析

因为我们是通过ReactDOM.render方法渲染的弹窗，这就意味着弹窗组件跟主应用App的状态是隔离的，如果弹窗中用到Redux这种需要上下文Provider能力的工具，就需要在弹窗组件中也初始化一次。但是对于像二次确认弹窗这种简单的纯展示的组件，结合Promise的方式是完全可行的。

总结

日常开发工作中总有一些能够优化的步骤和流程，我们能够多思考一下，转变思路，就能够让我们的代码更加赏心悦目。

背景思考在线演示Live Demo 代码实现普通方式实现有机结合Promise 缺点分析总结