自己使用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

在react16中，传送门api直接被封装在ReactDOM.createPortal()这个方法中了，它接收一个node类型的参数，这个参数就是你要挂载的dom节点，在这里我们新建了一个高阶组件PortalWrapper，用它来封装传送门的api，因为我不想把这里面的逻辑和modal组件混起来，所以有了这个高阶组件，在原来的SevenModal组件中就可以用<PortalWrapper>包裹起来。在这里我们挂在body下的一个div中