Portal

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

简介

Portal 是一个围绕 React 的 createPortal() API 构建的实用组件。它以便捷的组件形式为你提供 createPortal() 的功能。

Portal 组件在内部被 Modal 和 Popper 组件使用。

组件

import { Portal } from '@mui/base/Portal';

通常，组件的子组件会在该组件的 DOM 树中渲染。但有时需要在 DOM 中的不同位置挂载子组件。

Portal 组件接受一个 container prop，该 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 键开始编辑

服务端

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

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