Portal 传送门

The portal component renders its children into a new "subtree" outside of current DOM hierarchy.

📦 1.3kB 已压缩的包

Portal 组件的子节点将被添加到指定的 容器 中。 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>
<div className={classes.alert}>
  It looks like I will render here.
  {show ? (
    <Portal container={container.current}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</div>
<div className={classes.alert} ref={container} />

服务器端

React doesn't support the createPortal() API on the server. You have to wait for the client-side hydration to see the children.

API

<Portal />