认识

2023年02月18日

柏拉文

越努力，越幸运

一、class 组件写法

---

import React from "react";
import { createPortal } from "react-dom";

export default class MyDialog extends React.Component {
  constructor(props) {
    super(props);
    if (!this.node) {
      this.node = document.createElement("div");
      this.node.classList = ["my-dialog"];
      document.body.appendChild(this.node);
    }
  }
  componentWillUnmount() {
    this.node && this.node.remove();
  }
  render(){
    return createPortal(<div>我的弹窗</div>,this.node);
  }
}

二、hooks 组件写法

import React, { useEffect } from "react";
import { createPortal } from "react-dom";

export default function MyDialog() {
  let node = document.createElement("div");
  node.classList = ["my-dialog"];
  document.body.appendChild(node);
  useEffect(() => {
    return () => {
      node && node.remove();
    };
  }, []);
  return createPortal(<div>我的弹窗</div>, node);
}