Portal

Portal 元件讓您將其子元素渲染到 Portal 本身 DOM 階層之外的 DOM 節點中。

簡介

Portal 是一個基於 React 的 createPortal() API 建構的實用元件。它以方便的元件形式提供 createPortal() 的功能。Modal 和 Popper 元件在內部使用它。

通常，元件的子元素會在該元件的 DOM 樹狀結構中渲染。但有時需要在 DOM 中的不同位置掛載子元素。Portal 元件接受 container 屬性，該屬性會將 ref 傳遞到將掛載其子元素的 DOM 節點。

以下示範展示了如何將 <span> 內巢狀的 Portal 附加到 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 屬性回呼。此回呼會在 React 版面配置效果期間呼叫

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

API

請參閱以下文件，以取得此處提及之元件可用的所有屬性和類別的完整參考。

<Portal />