任意层次嵌套弹层组件的实现，轻松打造可缩放的复杂弹层结构

前端

2022-12-28 04:47:50

React Portals: 构建无限层级弹出层结构的利器

在现代的前端开发中，弹层组件已成为不可或缺的元素，为用户提供交互式、用户友好的界面。然而，当涉及到多层嵌套的弹层时，实现起来就会变得更加复杂。

基于 React Portals 实现无限层级弹出层结构

React Portals API 允许我们突破 React 组件层级限制，将组件渲染到 DOM 树的任意位置。这为创建复杂弹出层结构提供了极大的灵活性。

实现原理

React Portals API 的核心思想是创建一个虚拟 DOM 节点，将其置于 DOM 树的任意位置，然后将组件渲染到该节点上。

创建一个空 <div> 元素作为弹层容器。
使用 ReactDOM.createPortal() 将组件渲染到虚拟节点上。

通过这种方式，弹层组件脱离了父组件的限制，可以渲染到 DOM 树的任何位置。

无限层级

基于 React Portals，我们可以轻松实现无限层级的弹出层结构。通过在弹层组件中递归调用 ReactDOM.createPortal(), 我们可以在一个层级上创建另一个层级，以此类推。

优点

可维护性： 组件与父组件代码分离，提高了代码的可维护性和可理解性。
可扩展性： 不受组件层级限制，可以轻松扩展到任意层级，避免性能问题。
灵活性： 可以将组件置于 DOM 树的任意位置，灵活创建各种复杂弹层结构。

代码示例

以下是一个使用 React Portals 创建无限层级弹出层结构的示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";

const PortalContainer = () => <div />;

const MyPopupComponent = () => {
  const [showPopup, setShowPopup] = useState(false);

  const openPopup = () => setShowPopup(true);
  const closePopup = () => setShowPopup(false);

  return (
    <div>
      {showPopup &&
        ReactDOM.createPortal(
          <MyPopupComponent />,
          document.getElementById("portal-container")
        )}
      <button onClick={openPopup}>Open Popup</button>
      <button onClick={closePopup}>Close Popup</button>
    </div>
  );
};

ReactDOM.render(
  <PortalContainer />,
  document.getElementById("root")
);