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 更加簡潔，不需要手動編寫顯示關閉邏輯。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Vx-MsGvKGdRAXCFrrTStzQ

猜你喜歡