TypeScript中的 Portals 组件：助力创建跨越组件的UI元素

2023-09-20 23:23:17

TypeScript 中的 Portals 组件：创建跨越组件的 UI 元素

在构建用户界面时，我们经常会遇到需要在父组件之外显示某些 UI 元素的情况。例如，我们需要创建一个全局对话框或覆盖整个 Web 应用程序的提示。传统的做法是将这些元素直接渲染在父组件中。但是，这种方法存在一些问题。

首先，在父组件中直接渲染这些元素会使父组件的结构变得复杂。这使得父组件的代码难以维护和理解。其次，在父组件中直接渲染这些元素会限制这些元素的可重用性。也就是说，如果我们要在另一个组件中使用相同的 UI 元素，我们就必须将相同的代码复制到另一个组件中。

为了解决这些问题，我们可以使用 TypeScript 中的 Portals 组件。Portals 组件允许我们将节点渲染在父组件之外，但是这些节点仍然可以使用父组件上下文中的属性。这样，我们就可以在不影响父组件结构的情况下创建全局对话框或覆盖整个 Web 应用程序的提示。

如何使用 Portals 组件？

要使用 Portals 组件，我们需要先在父组件中创建一个 portal 元素。然后，我们可以使用 createPortal 方法将节点渲染到 portal 元素中。createPortal 方法接受两个参数：要渲染的节点和 portal 元素。

import { createPortal } from "react-dom";

const App = () => {
  const portal = document.getElementById("portal");

  return (
    <div>
      <button onClick={() => {
        const modal = createPortal(
          <div>
            <h1>这是一个模态框</h1>
          </div>,
          portal
        );
      }}>
        打开模态框
      </button>
    </div>
  );
};