React在body下追加全局組件

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

export default class BodyPopupMask extends React.Component {
  constructor(props) {
    super(props);

    const doc = window.document;
    this.popupMaskNode = doc.createElement('div');
    doc.body.appendChild(this.popupMaskNode);
  }

  render() {
      const { children, className = '' } = this.props
    return createPortal(
      <div className={`popup_content_mask ${className}`}>
        { children }
      </div>, //塞進傳送門的JSX
      this.popupMaskNode //傳送門的另一端DOM popupMaskNode
    );
  }

  componentWillUnmount() {  //在組件從 DOM 中移除之前立刻被調用
    window.document.body.removeChild(this.popupMaskNode);
  }
}


// import PopupMask from '@/components/BodyPopupMask/BodyPopupMask.jsx';
/* 
<PopupMask className="">
  <div>內容</div>
</PopupMask> 
*/