React中几种编写弹窗的方式

方式一:按钮与弹窗封装成一个组件

将按钮和弹窗封装成一个组件，可以大大提高 React 代码的可重用性、可维护性和可扩展性。以下是示例代码：

import React, { useState } from "react";
import { Button, Modal } from "antd";

const MixWay = (props) => {
  const [visiable, setVisiable] = useState(false);

  const onOk = () => {
    console.log("编写自己的onOk逻辑");
    closeModal();
  };

  const closeModal = () => {
    setVisiable(false);
  };

  return (
    <>
      <Button onClick={() => setVisiable(true)}>按钮+弹窗</Button>
      <Modal
        title="按钮+弹窗"
        open={visiable}
        onOk={onOk}
        onCancel={closeModal}
        afterClose={closeModal}
      >
        <p>弹窗内容</p>
      </Modal>
    </>
  );
};

export default MixWay;

封装成一个组件后，我们可以轻松地复用该组件并根据需要进行扩展。

实际例子

比如下面两个回放按钮

• 单批次回放

• 单接口批量回放

两者弹窗内容基本一致,只是单接口批量回放需要指定接口,单批回放不需要指定接口

所以将它封装成一个组件

方式二:函数式弹出弹窗

https://juejin.cn/post/7130623457993162759

https://opensource.ebay.com/nice-modal-react/#real

使用https://github.com/ebay/nice-modal-react,它帮助我们快速创建弹框，写起来更加简洁

MyModal弹窗

import React from "react";
import NiceModal, { useModal } from "@ebay/nice-modal-react";
import { Modal } from "antd";

const MyModal = NiceModal.create((props) => {
  const { name } = props;
  const modal = useModal();

  const onOk = () => {
    console.log("编写自己的onOk逻辑");
    modal.hide();
  };

  return (
    <Modal
      title="Hello Antd"
      open={modal.visible}
      onOk={onOk}
      onCancel={modal.hide}
      afterClose={modal.remove}
    >
      Greetings: {name}!
    </Modal>
  );
});

MyModal.propTypes = {};

export default MyModal;

AntdSample使用

import React from "react";
import { Button } from "antd";
import NiceModal from "@ebay/nice-modal-react";
import MyModal from "./MyModal";

const AntdSample = () => {
  return (
    <>
      <Button onClick={() => NiceModal.show(MyModal, { name: "Nate" })}>
        Show Modal
      </Button>
    </>
  );
};

export default AntdSample;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import NiceModal from "@ebay/nice-modal-react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>
);

这段代码使用了 NiceModal 和 useModal，这是 eBay 开发的一个 React 组件库，能够帮助我们快速创建模态框（Modal）。使用它有以下好处：

1. 代码简洁：NiceModal 将 Modal 的显示逻辑和 UI 逻辑封装好，我们只需要编写自己的逻辑即可。在这段代码中，我们只需要编写 MyModal 组件的内容，而不用关心 Modal 的显示和关闭逻辑。

2. 可维护性高：使用 NiceModal，我们可以将重复的 Modal 逻辑封装成一个组件，便于统一管理和维护。下次再有类似的 Modal 需求时，我们只需要拿出这个组件进行改造即可。

3. 可扩展性好：NiceModal 提供了一些钩子函数（例如 useModal）和配置项，可以方便地扩展自己的 Modal 组件。例如，在 MyModal 组件中使用了 useModal 钩子函数获取 modal 对象，然后就可以调用它提供的一些方法（例如 hide()）来控制 Modal 的显示和关闭。

小结

以上两种编写弹窗的方式，方式二使用 nice-modal-react 更加简洁，不需要手动编写显示关闭逻辑。