一、什麼是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/zh-tw/n/147327.html
微信掃一掃 
支付寶掃一掃 