组件的基本构架已经完成，现在要想一想解耦的事情了，因为这个组件是公用的组件，要在不同的组件下使用。要适应不同父组件的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中
