React TypeScript页面加载时如何设置cookie同意弹窗显隐

问题根因 #

1. 原生<div>元素不支持onLoad事件，该事件仅对img、script、iframe等带资源加载的元素生效，你绑定的触发时机本身不符合预期
2. OnpageLoad方法内的显隐逻辑完全写反：本地存储存在同意标识时才需要隐藏弹窗，你当前的逻辑是没有同意标识时隐藏弹窗
3. 直接操作原生DOM不符合React设计范式，容易和虚拟DOM更新逻辑冲突

修复方案 #

推荐用React原生的useEffect钩子做挂载后校验，配合状态控制弹窗显隐，避免直接操作DOM：

1. 修改view.tsx逻辑 #

import { useState, useEffect } from 'react'
import cookieconsent from './cookieconsent'

export default function PageComponent() {
  // 初始化不展示弹窗，等本地存储校验完成后更新状态
  const [showConsentPopup, setShowConsentPopup] = useState(false)

  useEffect(() => {
    // 组件挂载完成后执行，此时DOM已完全渲染
    const hasAgreed = localStorage.getItem("jdc_consent") === "true"
    // 仅未同意过的用户展示弹窗
    setShowConsentPopup(!hasAgreed)
  }, [])

  const handleAccept = () => {
    cookieconsent.acceptConsent()
    setShowConsentPopup(false)
  }

  const handleReject = () => {
    cookieconsent.rejectConcent()
    setShowConsentPopup(false)
  }

  return (
    <div>
      <div>
       ...
      </div>
      {/* 通过状态直接控制是否渲染弹窗，不需要额外加hidden类 */}
      {showConsentPopup && (
        <div
          style={{
            position: "fixed",
            bottom: 0,
            left: 0,
            right: "0",
          }}
        >
          <p>
            By using this site you agree to our Terms and Conditions{" "}
            <a onClick={handleAccept}>Accept</a> or{" "}
            <a onClick={handleReject}>Reject</a>
          </p>
        </div>
      )}
    </div>
  )
}

2. 简化cookieconsent.ts（可选，无需再操作DOM） #

const storageType = localStorage;
const consentPropertyName = "jdc_consent";

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

class UserConsent {
  async acceptConsent() {
    saveToStorage();
  }

  async rejectConcent() {
    storageType.removeItem(consentPropertyName);
  }
}

export default new UserConsent();

最小改动兼容方案 #

如果不想调整原有逻辑结构，只需要修正两个点即可：

• 删除div上的onLoad={cookieconsent.OnpageLoad}绑定，在组件内加useEffect(() => {cookieconsent.OnpageLoad()}, [])
• 修改OnpageLoad的逻辑判断：

OnpageLoad() {
  const hasConsented = storageType.getItem(consentPropertyName) === "true";
  // 已经同意的情况下才隐藏弹窗
  if (hasConsented) {
    let html = document.getElementById("consent-pop") as HTMLElement;
    html.classList.add("hidden");
  }
}

内容的提问来源于stack exchange，提问作者techstack