Portal 传送门
传送门组件将其子节点渲染到当前 DOM 结构之外的新 "子类树" 当中。
传送门组件的子节点将被添加到指定的 container 中。 Modal 和 Popper 组件内部都是用了该组件。
示例
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 不支持服务端渲染的 createPortal() API。 您必须等到客户端的注水渲染（hydration）之后才能见到子节点。