https://takao.blog/es/tags/portal/Recent content in Portal on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/react-portal-patterns/Tue, 03 Sep 2024 00:00:00 +0900https://takao.blog/es/web/react-portal-patterns/<img src="https://takao.blog/img/thumbnail/react-portal-patterns-es.png" alt="Featured image of post Patrones de Portal en React: Renderizado fuera del árbol padre" /><p>ReactDOM.createPortal renderiza un componente fuera del árbol DOM del padre, útil para modales, tooltips y dropdowns que necesitan evitar overflow: hidden o z-index del padre.</p> <h2 id="uso-básico">Uso básico </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span><span style="color:#a6e22e">createPortal</span>(<span style="color:#a6e22e">children</span>, <span style="color:#a6e22e">domNode</span>) </span></span></code></pre></div><p>El portal se renderiza en <code>domNode</code> pero conserva el contexto React (props, estado, context API).</p> <h2 id="casos-de-uso-comunes">Casos de uso comunes </h2><p>Modales, notificaciones toast, tooltips, menús contextuales, paneles laterales. Todos necesitan salir del flujo de layout del padre.</p> <h2 id="accesibilidad">Accesibilidad </h2><p>Los portales deben manejar el foco correctamente: atrapar foco dentro del modal, cerrar con Escape, restaurar foco al cerrar. Combinar con la Popover API nativa cuando sea posible.</p>