react portals

写在前面

portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案

官方介绍

//portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案
ReactDOM.createPortal(child, container)
//第一个参数（child）是任何可渲染的React子元素（字符串或fragment）
//第二个参数container是一个DOM元素

为什么需要Portals

当你想把父组件的某个子组件渲染到页面中其它盒子（非父组件子树）里的时候，就用 portal

场景

写modal的时候

一般思路

可能很多同学会直接在JSX中把Modal画出来，像这样

<div class="modal">    
  <div> ... </div>    
    { needModal ? <Modal /> : null } 
</div>

缺陷

• modal生成的代码会与JSX中的代码冗余在一起，而modal的显示位置大多情况是在中间位置，目前modal与其他组件冗余，我们需要CSS的position属性控制modal位置，就要求