Portal 与覆盖层

用 createPortal 把对话框渲染到 body 下的独立节点,避开父级裁剪与层叠上下文,逐项检查层叠、滚动锁定、焦点和关闭行为。

React核心约 25 分钟
开始学习
学习目标
  • 用 createPortal 实现对话框,解释「DOM 位置」与「React 树位置」分离的含义
  • 逐项实现覆盖层四件套:层叠、滚动锁定、焦点管理、关闭行为(Esc/遮罩)
  • 验证 portal 内事件沿 React 树冒泡、context 正常工作,兼顾嵌套布局
知识点
createPortal对话框滚动锁定焦点管理事件冒泡

内容版本 1.0.0,核验于 2026-10-26

Command Palette

Search for a command to run...