当存在使用 nextjs tailwind 的模式时，如何禁用滚动？

Question

我目前已经设置了这段代码，但我认为这不是正确的使用方式，因为它给了我“文档未定义”。

export default function Modal() {
  const [modal, setModal] = useState(false);

  const toggleModal = () => {
    setModal(!modal);
  };

//   BELOW IS THE ERROR

  if (modal) {
    document.body.classList.add('active-modal');
  } else {
    document.body.classList.remove('active-modal');
  }

Answer 1

我没有测试结果，但尝试在useEffect()钩子内编写 if 语句。我认为最初文档对象对于 nextJs 来说是未知的，全局窗口对象也是如此！

对于副作用，请始终尝试使用useEffect()钩子。useEffect()在组件挂载到 DOM 上之后运行。