0
124
VistasReact Portal no funciona con un componente de información sobre herramientas
Estoy tratando de usar el portal de reacción con mi componente de información sobre herramientas. No hay errores, sin embargo, no parece estar funcionando:
- La información sobre herramientas todavía está parcialmente oculta por su contenedor principal con
overflow:hidden - No lo veo agregado a un nuevo div fuera de
#root.
import { Portal } from 'react-portal'; return ( <> <Wrapper onMouseEnter={showTip} onMouseLeave={hideTip} ref={triggerRef} > {children} </Wrapper> {render && ( <Portal node={triggerRef.current}> <Content placement={placement} fade={active} > {content} </Content> </Portal> )} </> );Aquí está Codesandbox para el código completo.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que no hay nada malo con reaccionar portal, el problema es su estilo, hice un pequeño cambio en su archivo portal.js:
if (typeof window === "object") { if (target) { root = document.getElementById("root"); } el = document.createElement("div"); el.setAttribute('style', 'position:relative'); // this line el.id = "portal-root"; } porque su información sobre herramientas se mostró directamente en su texto y onMouseLeave llamó inmediatamente y la información sobre herramientas se oculta nuevamente, por lo que en el componente con estilo y en el caso superior cuando cambié el estilo inferior:
${({ placement }) => placement === "top" && css` bottom: calc(100% + 50px); // this line &::before { top: calc(100% - 10px); } `} y sus obras: 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta