![React进阶之路](https://wfqqreader-1252317822.image.myqcloud.com/cover/752/26793752/b_26793752.jpg)
上QQ阅读APP看书,第一时间看更新
3.3 Portals
React 16的Portals特性让我们可以把组件渲染到当前组件树以外的DOM节点上,这个特性典型的应用场景是渲染应用的全局弹框,使用Portals后,任意组件都可以将弹框组件渲染到根节点上,以方便弹框的显示。Portals的实现依赖ReactDOM的一个新的API:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T69_2711.jpg?sign=1738836784-ldDN1R4RcTajhqOK9smrtAdMEAlVcXwA-0-35d3937e21266073dcc1b0d4149ef1b1)
第一个参数child是可以被渲染的React节点,例如React元素、由React元素组成的数组、字符串等,container是一个DOM元素,child将被挂载到这个DOM节点。
我们创建一个Modal组件,Modal使用ReactDOM.createPortal()在DOM根节点上创建一个弹框:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T69_3393.jpg?sign=1738836784-qEA6D19hIImTvccApd4Zz3rFESH53wtq-0-5907e4b3c5fc7b5b94fe253a16adac2c)
在App中使用Modal:
![](https://epubservercos.yuewen.com/700037/15253388305240606/epubprivate/OEBPS/Images/Figure-T70_3394.jpg?sign=1738836784-KtD9A5gym2NBzN1bN9132gEEHc8ImXR8-0-f56fb8cea119af1a776e92d91eb26b66)
本节项目源代码的目录为/chapter-03/react16-portals。