Portal

传送门组件将其子节点渲染到当前 DOM 结构之外的新 "子类树" 当中。

传送门组件的子节点将被添加到指定的 container 中。 The component is used internally by the Modal and Popper components.

示例

It looks like I will render here.

<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} />

Press Enter to start editing

服务器端

React 不支持服务端渲染的 createPortal() API。您必须等到客户端的注水渲染（hydration）之后才能见到子节点。

Unstyled

📦 970 B gzipped

As the component does not have any styles, it also comes with the Base package.

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

API

<Portal />