React Portals使用方法和使用场景

一、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 插槽(事件冒泡)