如何在页面加载时在反应打字稿中设置可见性

Posted 2023-02-21

【中文标题】如何在页面加载时在反应打字稿中设置可见性

【英文标题】：How to set visibility in react typescript on page load

【发布时间】：2021-12-27 23:22:59

【问题描述】：

我在用户可以接受或拒绝的反应应用程序中创建 cookie 同意。如果用户已经接受 cookie 概念，则不再显示。

如果项目已经设置，我想检查页面加载，不显示同意，否则显示（html 到隐藏）。但问题是 onLoad 事件，文档还没有准备好。 我该如何解决这个问题？

另外，我发现页面加载时点击了“OnpageLoad()”

接受和拒绝工作正常

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();

view.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>

【问题讨论】：

您可以尝试使用属性hidden 或简单样式display:none 。

是的，我已经尝试了所有这些，但问题是页面加载时 dom 还没有准备好。 document.getElementById("consent-pop") as HTMLElement; 正在返回 null

【参考方案1】：

试试这个：

const storageType = localStorage;
const consentPropertyName = "jdc_consent";
const saveToStorage = () => storageType.setItem(consentPropertyName, "true");

class UserConsent 

  componentDidMount() 
    window.addEventListener('load', this.handleLoad);
  

  handleLoad() 
    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();

也许也可以尝试使用useEffect。