Portal
O componente portal renderiza seus elementos filho em uma nova "subárvore" fora da hierarquia do DOM atual.
O filho do componente portal será adicionado ao container
especificado. O componente é usado internamente pelos componentes Modal
e Popper
.
Exemplo
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} />
Do lado do servidor
React não suporta a API createPortal()
no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho.