Portal

Portal 组件允许你将其子组件渲染到 Portal 自身 DOM 层次结构之外的 DOM 节点中。

简介

Portal 是一个围绕 React 的 createPortal() API 构建的实用组件。它以便捷的组件形式为你提供 createPortal() 的功能。它在内部被 Modal 和 Popper 组件使用。

通常，组件的子组件在该组件的 DOM 树中渲染。但有时有必要将子组件挂载到 DOM 中的不同位置。Portal 组件接受一个 container prop，它将 ref 传递给其子组件将被挂载到的 DOM 节点。

以下演示展示了嵌套在 Portal 中的 <span> 如何附加到 Portal DOM 层次结构之外的节点——点击挂载子组件以查看其行为

看起来我将在这里渲染。

<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  It looks like I will render here.
  {show ? (
    <Portal container={() => container.current!}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  It looks like I will render here.
  {show ? (
    <Portal container={() => container.current!}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

按 Enter 开始编辑

基础知识

导入

import Portal from '@mui/material/Portal';

自定义

服务端 Portal

DOM API 在服务端不可用，因此你需要使用 container prop 回调。此回调在 React 布局 effect 期间被调用

<Portal container={() => document.getElementById('filter-panel')!}>
  <Child />
</Portal>

API

请参阅下面的文档，以获取此处提及的组件的所有 props 和类的完整参考。

<Portal />