一、什么是React createPortal？
React createPortal是React 16版本中新增的API，它可以将组件渲染到组件层级之外的DOM节点上，解决了在组件内部渲染弹框、悬浮框等组件时，DOM节点层次结构不合理的问题。该API的使用方式如下:
{`ReactDOM.createPortal(child, container)`}其中child参数代表要渲染的React元素或组件，container参数代表一个有效的DOM容器元素。
二、React createPortal与ReactDOM.render()的区别
React createPortal实际上与ReactDOM.render()非常类似，它们的共同点是都可以将React元素渲染到容器元素内。但是它们的不同点在于渲染的位置。ReactDOM.render()只能将元素渲染至组件的容器内部，而React createPortal可以将元素渲染到组件层级之外的任意节点上。
换言之，ReactDOM.render()是在作用于内部渲染，而React createPortal是在作用于外部渲染，它可以绕过控制台的警告提示，例如控制台可能会对style样式的使用进行警告，但使用React createPortal可以忽略这些警告。
三、React createPortal与组件上下文的关系
React createPortal渲染的内容是在组件外部渲染的，但是其中嵌套的组件可以与组件上下文交互。在createPortal的情况下，组件的上下文可以被update并且componentWillUnmount正确地被触发。
例如：
{`class ParentComponent extends React.Component {
state = {
showChildComponent: false
}
render() {
return (
{this.state.showChildComponent && (
)}
原创文章，作者：QQWG，如若转载，请注明出处：https://www.506064.com/n/147327.html
微信扫一扫 
支付宝扫一扫 