React写一个 Modal组件

mkmin

于 2024-06-16 14:27:11 发布

阅读量458

点赞数 3

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/139719985

版权

吐槽一波

最近公司的项目终于度过了混乱的前期开发，现在开始有了喘息时间可以进行"规范"的处理了。
组件的处理，永远是前端的第一大任务，尤其是在我们的ui库并不怎么可靠的情况下，各个组件的封装都很重要，而Modal作为最独立的组件，就先拿它开刀了。

Modal的ui

首先，我们要创建一个最基本的组件，一个fixed布局的ui布局
在这里插入图片描述

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="fixed bottom-0 top-0 isd_modal">
      <div className="isd_modal_container top-50 fixed">
        <div className="isd_modal_header">
          <div>Modal Title</div>
          <div className="icon">x</div>
        </div>
        <div className="isd_modal_body py-0 px-4">Modal content</div>
        <div className="isd_modal_footer">
          <div className="cancel_btn btn h-9">Cancel</div>
          <div className="confirm_btn btn h-9">Ok</div>
        </div>
      </div>
    </div>
  );
}

export default App;

由于css样式不是关注的重点，所以只会在最后的地方贴上css。
上面的代码也没啥好讲的，ui也贴出来了。

封装组件

最基本的ui构建完成后，我们需要将它封装成为一个组件，并且将各个参数传进来，最基本的参数无非是title以及content的内容，外加点击ok按钮以及cancel按钮的回调，以及最重要的控制Modal的显隐，下面的例子也会添加这么几个参数。

import { FC } from "react";
import "./index.css";

interface ModalComponentProps {
  isVisible: boolean;
  modalTitle: string;
  children: React.ReactNode;
  onOk: () => void;
  onClose: () => void;
}

const ModalComponent: FC<ModalComponentProps> = ({
  isVisible,
  children,
  modalTitle,
  onClose,
  onOk,
}) => {
  return isVisible ? (
    <div className="fixed bottom-0 top-0 isd_modal">
      <div className="isd_modal_container top-50 fixed">
        <div className="isd_modal_header">
          <div>{modalTitle}</div>
          <div className="icon" onClick={onClose}>
            x
          </div>
        </div>
        <div className="isd_modal_body py-0 px-4">{children}</div>
        <div className="isd_modal_footer">
          <div className="cancel_btn btn h-9" onClick={onClose}>
            Cancel
          </div>
          <div className="confirm_btn btn h-9" onClick={onOk}>
            Ok
          </div>
        </div>
      </div>
    </div>
  ) : null;
};
export default ModalComponent;

组件接受了从外部传进来的各个参数，并且将其渲染在页面上，如果有一些特殊性的动作，比如会从外部切换显示隐藏，建议对isVisible属性做useEffect的监听。
外部使用该组件的方法如下：

  <ModalComponent
        isVisible={modalVisible}
        modalTitle={"title from App.tsx"}
        children={<div>content from App.tsx</div>}
        onOk={function (): void {
          console.log("onOk from App.tsx");
          setModalVisible(false);
        }}
        onClose={function (): void {
          console.log("onClose from App.tsx");
          setModalVisible(false);
        }}
      />
其中，modalVisible一般会使用useState去存储状态

  const [modalVisible, setModalVisible] = React.useState(false);
做完这些，我们还需要使用createPortal做为我们的点睛之笔，将整个组件挂载在body上，这是必须要做的。

const ModalComponent: FC<ModalComponentProps> = ({
  isVisible,
  children,
  modalTitle,
  onClose,
  onOk,
}) => {
  const renderModal = createPortal(
    <div className="fixed bottom-0 top-0 isd_modal">
      <div className="isd_modal_container top-50 fixed">
        <div className="isd_modal_header">
          <div>{modalTitle}</div>
          <div className="icon" onClick={onClose}>
            x
          </div>
        </div>
        <div className="isd_modal_body py-0 px-4">{children}</div>
        <div className="isd_modal_footer">
          <div className="cancel_btn btn h-9" onClick={onClose}>
            Cancel
          </div>
          <div className="confirm_btn btn h-9" onClick={onOk}>
            Ok
          </div>
        </div>
      </div>
    </div>
,
    document.body
  );
  return isVisible ? renderModal : null;
};

上述代码中，第八行使用了createPortal去将我们的Modal挂载在了body上。
css文件如下：

.bottom-0{
    bottom: 0;
  }
  .top-0{
    top: 0;
  }
  .top-50{
    top: 50%;
  
  }
  .fixed{
    position: fixed;
  }
  .py-0{
    padding: 0;
  }
  .px-4{
    padding-left: 8px;
    padding-right: 8px;
  }
  .isd_modal {
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
  }
  
  .isd_modal .isd_modal_container {
    background-color: #ffffff;
    border-radius: 8px;
    min-width: 600px;
    max-width: 80vw;
    height: fit-content;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .isd_modal .isd_modal_container .isd_modal_header {
    height: 60px;
    padding: 16px;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .isd_modal .isd_modal_container .isd_modal_footer {
    height: 68px;
    margin-bottom: 16px;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .isd_modal .icon {
    cursor: pointer;
  }
  .isd_modal .isd_modal_footer .btn {
    min-width: 78px;
    padding: 8px 16px;
    width: fit-content;
    font-size: 14px;
    border-radius: 4px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
  }
  .isd_modal .confirm_btn {
    background-color: #1274a1;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin-left: 16px;
  }
  
  .isd_modal .cancel_btn {
    background-color: #fbfbfb;
    color: #242424;
    border: 1px solid #b8b8b8;
  }
  .isd_modal .icon_close {
    fill: #1b1b1b;
  }
  
组件的全部代码如下：
import { FC } from "react";
import "./index.css";
import { createPortal } from "react-dom";

interface ModalComponentProps {
  isVisible: boolean;
  modalTitle: string;
  children: React.ReactNode;
  onOk: () => void;
  onClose: () => void;
}

const ModalComponent: FC<ModalComponentProps> = ({
  isVisible,
  children,
  modalTitle,
  onClose,
  onOk,
}) => {
  const renderModal = createPortal(
    <div className="fixed bottom-0 top-0 isd_modal">
      <div className="isd_modal_container top-50 fixed">
        <div className="isd_modal_header">
          <div>{modalTitle}</div>
          <div className="icon" onClick={onClose}>
            x
          </div>
        </div>
        <div className="isd_modal_body py-0 px-4">{children}</div>
        <div className="isd_modal_footer">
          <div className="cancel_btn btn h-9" onClick={onClose}>
            Cancel
          </div>
          <div className="confirm_btn btn h-9" onClick={onOk}>
            Ok
          </div>
        </div>
      </div>
    </div>
,
    document.body
  );
  return isVisible ? renderModal : null;
};
export default ModalComponent;