[筆記] React 實作監聽螢幕寬度 @地瓜大的飛翔旅程

章節連結

內容

這回用 React 撰寫一下監聽螢幕寬度跟一般 JS 的差別。

內容

要使用 useEffect 來讓 React 初步渲染完 DOM 後，才去 window 物件中加上監聽器。

// 若 onClose 是一個外部方法

useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) {
        onClose();
      }
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [onClose]);