React 傳送門 Portals

Portal 提供了一種將子節點渲染到存在於父組件以外的 DOM 節點的優秀的方案。

ReactDOM.createPortal(child, container)

第一個參數（child）是任何可渲染的 React 子元素，例如一個元素，字符串或 fragment。第二個參數（container）是一個 DOM 元素。

簡單粗暴 小栗子🌰

const Toast:React.FC = (props) => {
    let node = document.createElement('div')
    
    useEffect(() => {
        const app: any = document.querySelector('#tt')
        app.appendChild(node)
        console.log(app)
    }, [node])

    return createPortal((
    <h3>{props.children}</h3>
    ), node);
}

通俗一點可以這麼理解，Portals 可以吧 當前jsx文件 渲染繞其他組件的 Element元素上

👆上面的栗子🌰

• node可以理解爲一個容器，用來承載當前的jsx 組件
• app 是目的dom元素

⚠️注意點比較簡單

• 就是要把createPortal放在render後面,來返回渲染，函數組件如上咯
• 當在使用 portal 時, 記住管理鍵盤焦點就變得尤爲重要。

Portal 進行事件冒泡，並不會隨着傳送們而改變，而是在掛載Portal組件的地方來管理事件

可以通過這個栗子來看