MadushikaPerera 译者
王强 策划
李俊辰
ReactPortal是一种 的方法，可以将子组件渲染到由组件树层次结构定义的父DOM层次结构之外的DOM节点中。Portal的最常见用例是子组件需要从视觉上脱离父容器的情况，如下所示。
模态对话框
工具提示
悬浮卡片
加载器
可以使用ReactDOM.createPortal(child,container)创建一个Portal。这里的child是一个React元素、片段或字符串，而container是Portal应该注入到的DOM位置（节点）。
以下是使用上述API创建的一个示例模态（modal）组件。constModal=({message,isOpen,onClose,children})={if(!isOpen)returnnullreturnReactDOM.createPortal(divclassName="modal"spanclassName="message"{message}/spanbuttononClick={onClose}Close/button/div,domNode)}
即使Portal是在父DOM元素外部渲染的，其行为也类似于应用程序中的常规React组件。它可以访问props和contextAPI。这是因为Portal位于ReactTree层次结构内。想要看一看ReactPortal的实践示例，请查看在Bit的组件中心上分享的这个组件（你也可以使用Bit共享和重用组件）：