tengo index.html
<body> <div id="portal"></div> <div id="root"></div> </body> y desea usar el componente a continuación en un div de portal div root div ,
import React from 'react'; const portalDiv = document.getElementById('portal'); function Portal1(props) { return ReactDOM.createPortal( <div> {props.children} <div/>, portalDiv); //here } export default Portal1;Pero recibo este error, Argumento de tipo 'HTMLElement | null' no se puede asignar a un parámetro de tipo 'Elemento'. El tipo 'null' no se puede asignar al tipo 'Element'.ts(2345) en VScode.
Estoy usando mecanografiado. Por favor ayuda.
Dado que getElementById posiblemente devuelve nulo. Entonces simplemente verifique antes de usar como:
function Portal1({ children }) { return portalDiv ? ReactDOM.createPortal(<>{children}</>, portalDiv) : null; }getElementById puede devolver null , pero createPortal no acepta null .
Si sabe que existirá el portal div, haga que el código sea explícito al respecto:
const portalDiv = document.getElementById('portal'); if (!portalDiv) { throw new Error("The element #portal wasn't found"); } Eso permitirá que TypeScript reduzca el tipo de la constante, eliminando el | null parte | null del tipo. También le brinda una buena advertencia proactiva si alguien cambia las cosas de modo que el div ya no esté allí cuando este código se ejecute más.
Otras personas han respondido que debe agregar una verificación nula, pero Typescript también tiene una afirmación no nula que puede usar cuando está seguro de que el valor nunca es nulo al agregar el ! operador hasta el final de su declaración:
const portalDiv = document.getElementById('#your-element')!;Creo que la mejor solución para esto no es convertirlo en nulo o en HTMLDIVElement , sino en el caso de uso, intentar que TypeScript sepa que el DivElement podría estar vacío en este momento, pero usted asumirá la responsabilidad simplemente usando "! " símbolo.
Ejemplo de código a continuación:
import React, {useEffect} from 'react'; import ReactDOM from 'react-dom'; import './modal-portlet.style.scss'; const modalRoot = document.getElementById('modalRoot'); type Props = { children: JSX.Element; }; const ModalPortlet: React.FC<Props> = ({children}): JSX.Element => { const divContainer = window.document.createElement('div'); divContainer.setAttribute('class', 'modal-container'); useEffect(() => { /********** * immediately the component mount append @divContainer as the childNode of @modalRoot in the DOM **********/ modalRoot!.appendChild(divContainer); return () => { modalRoot!.removeChild(divContainer); }; }); /************ * return the createPortal api that takes the children(JSX) and inject it into @divContainer which is already a childNode of @modalRoot ************/ return <>{ReactDOM.createPortal(children, divContainer)}</>; }; export default ModalPortlet;Entonces, no sé si alguien todavía tiene este problema, pero hay una solución más fácil y directa para esto. simplemente declare el elemento modal con la palabra clave "as"
const modalRoot = document.getElementById("modal-root") as HTMLElement; Esto elimina el error. Sugiero mirar a través de esta gran hoja de trucos de reacción mecanografiada.
https://github.com/typescript-cheatsheets/reaccionar
También estaba enfrentando el mismo error, así que probé algunas formas diferentes, pero la que funcionó para mí es manejar la condición nula, es decir, const portalDiv = document.getElementById('portal')!;