React Portal

使用场景

ReactDOM.createPortal(child, container)

将 child 挂载到 container 中去。

通常，当您从组件的呈现方法返回一个元素时，它会作为最近父节点的一个子节点挂载到DOM中。然而，有时将子元素插入DOM中的不同位置是很有用的。Portal 的一个典型用例是当父组件具有 overflow: hidden or z-index 样式，但您需要子组件在视觉上“突破”其容器时。例如，对话框、悬浮卡和工具提示。

事件冒泡机制

import React from 'react';
import ReactDom from 'react-dom'

const ModalContainer = document.getElementById('root_slib')

class Modal extends React.Component {
  render(h) {
    return ReactDom.createPortal(this.props.children, ModalContainer)
  }
}

class App extends React.Component {
  render(h) {
    return (
      <div className="App" onClick={() => console.log('catch bubble')}>
        <Modal>
          <button>click me</button>
        </Modal>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));