能力：将子节点渲染到存在于父组件以外的DOM节点
语法：ReactDOM.createPortal(child, container)
参数：child：任何可渲染的React子元素container：一个DOM元素（你想要渲染到的目标容器）
demo：
render() {
return ReactDOM.createPortal(
this.props.children,
domNode
);
}应用场景：
当父组件有overflow: hidden或z-index样式，而你需要子组件在视觉上跳出容器时。【对话框、悬浮卡及提示框等】
事件冒泡：一个从protal内部触发的事件会一直冒泡到react树的祖
先，如以下DOM结构中，#app-root中的Parent组件可以捕获到从兄弟节点#modal-root冒泡上来的事件。
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>
class Modal extends React.Component {
constructor(props) {
super(props);
this.el=document.createElement('div');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
ReactDOM.createPortal(
this.props.child,
this.el
);
}
}
class Parent extends React.Component {
render() {
<Modal>
<button>click</button>
</Modal>
}
}
ReactDOM.render(<Parent />, appRoot);
