Window is not defined in Next.js Change Navbar Color When Scrolling解决方案

【问题标题】：Window is not defined in Next.js Change Navbar Color When Scrolling SolutionWindow is not defined in Next.js Change Navbar Color When Scrolling解决方案
【发布时间】：2022-12-29 00:48:10
【问题描述】：

我当时正在使用 next js 13.0.6 & tailwind CSS 3.2.4 来制作滚动时更改颜色的功能。它显示我Window is not defined。我以不同的方式找到了许多解决方案，但没有一个对我有用。

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

我出错时的代码

const [color, setColor] = useState(false); 
  const changeColor = () => {
    if (window.scrollY >= 90) {
      setColor(true);
    } else {
      setColor(false);
    } 
  }
  window.addEventListener("scroll", changeColor);

和

<div className={color ? "bg-gray-700" : "bg-transparent"}></div>

我通过 useEffect 解决了 error 包装问题，如下所示

// Change Nav coolor
  const [color, setColor] = useState(false);
  useEffect(() => {
  const changeColor = () => {
    if (window.scrollY >= 90) {
      setColor(true);
    } else {
      setColor(false);
    } 
  };
  window.addEventListener("scroll", changeColor);
}, []);

【讨论】：