一、Portal定义
- 组件默认会按照既定层次嵌套渲染，该元素会被挂载到DOM元素中离其最近的父节点
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
二、通过 Portal 进行事件冒泡
当子元素里的按钮被点击时， 这个将会被触发更新父元素的 state， 即使这个按钮在 DOM 中不是直接关联的后代
import React, { Component } from "react";
import ReactDOM from "react-dom";
export default class Portals extends Component {
render() {
return (
<div
onClick={() => {
console.log("rooter click");
}}
>
<p>我想出现在root中</p>
<Test />
</div>
);
}
}
function Test() {
return ReactDOM.createPortal(
<ChildA />,
// <h1>我想出现在container中</h1>,
document.getElementById("container")
);
}
function ChildA() {
return <p>我是childA</p>;
}
image.png
注意事项
1.React中的事件是包装过的
2.它的事件冒泡是根据虚拟DOM树来冒泡，与真实的DOM树无关
三、应用场景
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框
参考文章：
React 之 Portals 插槽(事件冒泡)
