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组件的地方来管理事件

可以通过这个栗子来看