React中几种编写弹窗的方式

zx钟

发布于 2023-09-01 09:19:18

2.4K0

发布于 2023-09-01 09:19:18

文章被收录于专栏：测试游记

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

将按钮和弹窗封装成一个组件，可以大大提高 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）。使用它有以下好处：

代码简洁：NiceModal 将 Modal 的显示逻辑和 UI 逻辑封装好，我们只需要编写自己的逻辑即可。在这段代码中，我们只需要编写 MyModal 组件的内容，而不用关心 Modal 的显示和关闭逻辑。
可维护性高：使用 NiceModal，我们可以将重复的 Modal 逻辑封装成一个组件，便于统一管理和维护。下次再有类似的 Modal 需求时，我们只需要拿出这个组件进行改造即可。
可扩展性好：NiceModal 提供了一些钩子函数（例如 useModal）和配置项，可以方便地扩展自己的 Modal 组件。例如，在 MyModal 组件中使用了 useModal 钩子函数获取 modal 对象，然后就可以调用它提供的一些方法（例如 hide()）来控制 Modal 的显示和关闭。