Uso Next.js para mi aplicación de reacción, y me encontré con este problema mientras usaba 'createPortal'. Pasé casi un día con este problema, pero aún no se resolvió ... Verifico este código solo desde la aplicación de reacción, pero no puedo encontrar ningún problema. y me vuelve loco (¡en realidad no es el mismo código pero casi correcto!) Por favor, ayúdenme chicos :(
NavBar.tsx
// NavBar.tsx (to controll Modal.tsx) const [ modalClick, setModalClick ] = useState(false); const modalOpen = () => { setModalClick(true); } const modalClose = () => { setModalClick(false); } <p id = "link" onClick = { modalOpen }>Register</p> <div> {modalClick && <Modal component = {<LogIn/>} closePortal = { modalClose } selector = "#portal"/>} </div>_documentos.tsx
// _documents.tsx <body> <Main/> <NextScript/> <div id = "portal"/> </body>Modal.tsx
// Modal.tsx import React, { useState, useEffect, useRef } from "react"; import { createPortal } from "react-dom"; const Modal = ({ closePortal, component, selector }: any) => { const [modalOpen, setModalOpen] = useState(false); const ref = useRef<any>(); useEffect(() => { setModalOpen(true); document.body.style.overflow = "hidden"; if(document){ console.log("plz help me"); ref.current = document.querySelector(selector); } return () => { setModalOpen(false); document.body.style.overflow = "unset" }; }, [selector]); const exit = (e: any) => { if(e.target === e.currentTarget){ closePortal() } } if(modalOpen){ return createPortal( <> //////////// </>, ref.current ) }else return null; }; export default Modal