如何使用React创建一个弹窗组件

导语: 弹窗组件，在日常工作中使用频率较高；编写弹窗组件的方式有很多种。

一般实现弹窗的方式:

• js 获取宽高+fixed 的方式
• js 创建 div + ReactDOM.render

很多同学诧异说：

弹窗组件？不是正常编写一个 React 组件就 OK 了吗？把写好的组件放在父组件的 render 中不就 OK 了？

那么问题来了，弹窗组件一般会全局居中展示，并且背景会有一个灰色蒙版；如果只是简单的将组件插入到组件树中，你是无法使用 css 的方式获取到屏幕的宽高的。

此处只是简单介绍js 创建 div + ReactDOM.render实现弹窗的方式:

import * as React from "react";
import ReactDOM from "react-dom";
import Content, { IApplyTipsProps } from "./content";

export default class DialogCustom extends React.Component<IApplyTipsProps> {
  // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
  static show = (params: IApplyTipsProps) => {
    const container = document.createElement("div");
    container.setAttribute(
      "style",
      "width:100%;height:100%;z-index:9998;background-color:#00000052;position:fixed;left:0px;top:0px;"
    );
    document.body.appendChild(container);

    function closeHandle() {
      ReactDOM.unmountComponentAtNode(container);
      document.body.removeChild(container);
      params.onCancel();
    }

    function confirmHandle() {
      ReactDOM.unmountComponentAtNode(container);
      document.body.removeChild(container);
      params.onConfirm();
    }

    ReactDOM.render(
      <DialogCustom onConfirm={confirmHandle} onCancel={closeHandle} />,
      container
    );
  };

  // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
  render() {
    return <Content {...this.props} />;
  }
}

此处只是简单列举如何实现，此处的 Content 可以更换成自己的要展示的组件。

调用方式:

DialogCustom.show({
  onConfirm: () => {},
  onCancel: () => {},
});