Portals将组件渲染到父组件之外

• 组件默认是按照层级来进行嵌套渲染的，使用Portals可以让组件渲染到父组件以外
• 使用： ```jsx import React from ‘react’ import ReactDOM from ‘react-dom’ import ‘./style.css’

class App extends React.Component { constructor(props) { super(props) this.state = { } } render() { // // 正常渲染 // return

    // 使用 Portals 渲染到 body 上。
    // fixed 元素要放在 body 上，有更好的浏览器兼容性。
    return ReactDOM.createPortal(
        <div className="modal">{this.props.children}</div>,
        document.body // DOM 节点
    )
}

}

export default App

```

• 使用场景
  1. 父组件是个bfc，子组件想逃离bfc
  2. 父组件z-index值太小
  3. fixed需要放在body第一层级