在 Next.js 中打开移动导航时禁用主体滚动

Question

通常，您可以在 body 元素上切换 class 或 overflow 属性以在打开移动菜单或模式时禁用滚动，但是在服务器端呈现 Next.js 时，无法访问文档 object。我如何在移动导航菜单在 Next.js 中打开？

我尝试访问文档 object 以切换隐藏的覆盖，但由于 Next.js 是在服务器端呈现的，因此文档 object 尚不可用。

我还尝试使用 state 并将其传递到导航组件以切换 styles，但不能在应用程序的顶层使用 useState。

Answer 1

不确定这样做是否正确，但我使用了 useEffect 钩子来确保代码仅在组件加载后运行，然后将移动菜单 state 设置为依赖项。

useEffect(() => {
  mobileNav
    ? (document.body.style.overflow = 'hidden')
    : (document.body.style.overflow = 'auto');
}, [mobileMenuState]);