Estoy creando un consentimiento de cookies en una aplicación de reacción donde los usuarios pueden aceptar o rechazar. Si el usuario ya ha aceptado el concepto de cookie, no volver a mostrar.

Quiero verificar en la carga de la página si el elemento ya está configurado, no mostrar el consentimiento, sino mostrar (html a oculto). Pero el problema es que en el evento onLoad, el documento no está listo. ¿Cómo puedo arreglar esto?

Además, descubrí que en la carga de la página se presiona "OnpageLoad ()"

Aceptar y rechazar funcionando bien

cookieconsent.ts

 const storageType = localStorage; const consentPropertyName = "jdc_consent"; const saveToStorage = () => storageType.setItem(consentPropertyName, "true"); class UserConsent { OnpageLoad() { debugger; const shouldShowPopUp = storageType.getItem(consentPropertyName); if (shouldShowPopUp != "true") { let html = document.getElementById("consent-pop") as HTMLElement; html.classList.add("hidden"); } } async acceptConsent() { debugger; saveToStorage(); let html = document.getElementById("consent-pop") as HTMLElement; html.classList.add("hidden"); //html.style.display === "block"; } async rejectConcent() { storageType.removeItem(consentPropertyName); let html = document.getElementById("consent-pop") as HTMLElement; html.classList.add("hidden"); } } export default new UserConsent();

ver.tsx

 <div> <div> ... </div> <div id="consent-pop" onLoad={cookieconsent.OnpageLoad} style={{ position: "fixed", bottom: 0, left: 0, right: "0", }} className="visible" > <p> By using this site you agree to our Terms and Conditions{" "} <a onClick={cookieconsent.acceptConsent}>Accept</a> or{" "} <a onClick={cookieconsent.rejectConcent}>Reject</a> </p> </div> </div>