一、Portal定義

• 組件默認會按照既定層次嵌套渲染，該元素會被掛載到DOM元素中離其最近的父節(jié)點

Portal 提供了一種將子節(jié)點渲染到存在于父組件以外的 DOM 節(jié)點的優(yōu)秀的方案

ReactDOM.createPortal(child, container)

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

二、通過 Portal 進行事件冒泡

當子元素里的按鈕被點擊時， 這個將會被觸發(fā)更新父元素的 state， 即使這個按鈕在 DOM 中不是直接關聯(lián)的后代

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>我想出現(xiàn)在root中</p>
        <Test />
      </div>
    );
  }
}

function Test() {
  return ReactDOM.createPortal(
    <ChildA />,
    //     <h1>我想出現(xiàn)在container中</h1>,
    document.getElementById("container")
  );
}

function ChildA() {
  return <p>我是childA</p>;
}

image.png

注意事項
1.React中的事件是包裝過的
2.它的事件冒泡是根據(jù)虛擬DOM樹來冒泡，與真實的DOM樹無關

三、應用場景

一個 portal 的典型用例是當父組件有 overflow: hidden 或 z-index 樣式時，但你需要子組件能夠在視覺上“跳出”其容器。例如，對話框、懸浮卡以及提示框

參考文章：
React 之 Portals 插槽(事件冒泡)