Preact Portal 使用教程

Preact Portal 使用教程

preact-portal:satellite: Render Preact components in (a) SPACE :milky_way: :stars:项目地址:https://gitcode.com/gh_mirrors/pr/preact-portal

项目介绍

Preact Portal 是一个用于在 DOM 树的任意位置渲染子组件的库。它是 Preact 生态系统中的一个重要组件，允许开发者将组件渲染到 DOM 中的任何位置，而不是仅仅局限于组件树的结构。这对于实现模态框、工具提示等 UI 元素非常有用。

项目快速启动

安装

首先，你需要安装 preact 和 preact-portal：

npm install preact preact-portal

使用示例

以下是一个简单的示例，展示如何在 Preact 应用中使用 preact-portal：

import { h, render } from 'preact';
import { Portal } from 'preact-portal';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Portal into="body">
        <div className="modal">
          This is a modal rendered outside the normal component tree!
        </div>
      </Portal>
    </div>
  );
}

render(<App />, document.body);

在这个示例中，<Portal> 组件将 div.modal 渲染到 body 元素中，而不是在 App 组件的 DOM 结构中。

应用案例和最佳实践

模态框

使用 preact-portal 可以轻松实现模态框，确保模态框始终位于页面的最顶层：

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <Portal into="body">
      <div className="modal-overlay">
        <div className="modal-content">
          {children}
          <button onClick={onClose}>Close</button>
        </div>
      </div>
    </Portal>
  );
}

工具提示

工具提示是另一个常见的用例，可以使用 preact-portal 将工具提示渲染到页面的任意位置：

function Tooltip({ text, children }) {
  return (
    <div className="tooltip-container">
      {children}
      <Portal into="body">
        <div className="tooltip">{text}</div>
      </Portal>
    </div>
  );
}

典型生态项目

Preact Portal 是 Preact 生态系统的一部分，与以下项目紧密结合：

• Preact: 一个快速、轻量级的 React 替代品。
• Preact CLI: 用于快速创建 Preact 应用的命令行工具。
• Preact Signals: 用于状态管理的库，与 Preact 无缝集成。

通过结合这些工具和库，开发者可以构建高效、模块化的前端应用。

preact-portal:satellite: Render Preact components in (a) SPACE :milky_way: :stars:项目地址:https://gitcode.com/gh_mirrors/pr/preact-portal