
上QQ阅读APP看书,第一时间看更新
3.3 Portals
React 16的Portals特性让我们可以把组件渲染到当前组件树以外的DOM节点上,这个特性典型的应用场景是渲染应用的全局弹框,使用Portals后,任意组件都可以将弹框组件渲染到根节点上,以方便弹框的显示。Portals的实现依赖ReactDOM的一个新的API:

第一个参数child是可以被渲染的React节点,例如React元素、由React元素组成的数组、字符串等,container是一个DOM元素,child将被挂载到这个DOM节点。
我们创建一个Modal组件,Modal使用ReactDOM.createPortal()在DOM根节点上创建一个弹框:

在App中使用Modal:

本节项目源代码的目录为/chapter-03/react16-portals。