自分でreactを使って弾枠コンポーネントを書く(3)

コンポーネントの基本フレームワークが完了しました.このコンポーネントは共通のコンポーネントなので、異なるコンポーネントの下で使用する必要があります.異なる親コンポーネントのcssスタイルに適応するのは難しいし、親コンポーネントの外部スタイルがどうなっているか分からない.以上、指定したdomノードにコンポーネントを直接マウントする方法を考えます.
React Portals
https://reactjs.org/docs/portals.html
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
名前の通り、転送ゲートは、domノードの任意の場所にサブノードを掛ける特別な方法を提供する.
使い方

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
  
  
class PortalWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.node = document.createElement('div')
    document.body.appendChild(this.node)
  }
  render() {
    const {  children } = this.props;
    return  ReactDOM.createPortal(
      children,
      this.node,
    );

  }
}
  
  
PortalWrapper.defaultProps = {}
PortalWrapper.propTypes = {}
  
  
export default PortalWrapper

react 16では、転送ゲートapiは直接ReactDOM.createPortal()という方法でカプセル化されています.nodeタイプのパラメータを受信します.このパラメータは、あなたがマウントするdomノードです.ここでは、転送ゲートのapiをカプセル化するための高次コンポーネントPortalWrapperを新規作成しました.この中の論理とmodalコンポーネントを混同したくないので、だからこの高次コンポーネントがあれば、元のSevenModalコンポーネントで包むことができます.ここでbodyの下のdivに掛けます