<aside> 🔗 TOC

开发弹窗，你使用状态驱动还是命令式？

</aside>

前言

作为一名前端开发工程师，开发各种弹窗是家常便饭，但如何快捷高效、风格统一是一个问题。

状态驱动

在现如今前端技术栈都是 Vue、 React 的情况下，使用状态驱动是一种常用方式。比如我们页面要引入一个弹窗，点击某个按钮弹出：

<template>
  <div>
    <Modal1 v-show="visible" @close="closeModal" />
    <button @click="showModal" >click</button>
  </div>
</template>

<script>
import Modal1 from './modals/Modal1.vue'
export default {
  components: { Modal1 },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    // 弹出弹窗
    showModal(){
      this.visible = true
    },
    // 关闭弹窗，并传回数据
    closeModal(data) {
      this.visible = false
      // 拿到 data  todo something
    }
  }
}

以上有一个问题，控制弹窗显隐的变量、显示弹窗的逻辑、关闭弹窗的回调逻辑分散在不同的地方。

假设这个页面有不止一个弹窗，那么这样写：

<template>
  <div>
    <Modal1 v-show="visible1" @close="closeModal1" />
    <Modal2 v-show="visible2" @close="closeModal2" />
    <Modal3 v-show="visible3" @close="closeModal3" />
    <button @click="showModal1" >click</button>
    <button @click="showModal2" >click</button>
    <button @click="showModal3" >click</button>
  </div>
</template>

<script>
import Modal1 from './modals/Modal1.vue'
import Modal2 from './modals/Modal2.vue'
import Modal3 from './modals/Modal3.vue'

export default {
  components: { Modal1, Modal2, Modal3 },
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
    }
  },
  methods: {
    // 弹出弹窗
    showModal1(){
      this.visible1 = true
    },
    // 关闭弹窗，并传回数据
    closeModal1(data) {
      this.visible1 = false
      // 拿到 data  todo something
    },
    showModal2(){
      this.visible2 = true
    },
    // 关闭弹窗，并传回数据
    closeModal2(data) {
      this.visible2 = false
      // 拿到 data  todo something
    },
    showModal3(){
      this.visible3 = true
    },
    // 关闭弹窗，并传回数据
    closeModal3(data) {
      this.visible3 = false
      // 拿到 data  todo something
    },
  }
}

这样写起来简直不要太啰嗦。

命令式开发（函数式）

我开发了 promise-modal 这个库，可以在 React 项目中 Promise 函数式的开发调用弹窗。

安装

npm i promise-modal

使用

你的 Modal 组件这样写，我们会传入 **callbackResolve**和 callbackReject 两个 props 到你的组件中，你需要在关闭 Modal 的时候调用它们。

import React, { useState } from "react";
import { Modal, Button } from "antd";
import PropTypes from "prop-types";

const TestModal = props => {
  const { title, callbackResolve, callbackReject } = props;
  const [isModalVisible, setIsModalVisible] = useState(true);

  const handleOk = () => {
    setIsModalVisible(false);
    callbackResolve(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    callbackReject(false);
  };

  return (
    <Modal
      destroyOnClose
      title={title}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Modal>
  );
};

TestModal.propTypes = {
  title: PropTypes.string.isRequired,
  callbackResolve: PropTypes.func.isRequired,
  callbackReject: PropTypes.func.isRequired,
};
export default TestModal;

把你的 Modal 组件传入 create 函数

import { create } from "promise-modal";
import TestModal from "./TestModal";

// 如果你使用 Class 组件
export default data => create(TestModal, data);

// 如果你使用函数式组件和 hooks，你必须创建一个自定义 hooks 返回
export const useTestModal = () => {
  const showTestModal = data => create(TestModal, data);
  return showTestModal;
};

业务代码中使用 Modal，像 Promise 函数一样。