document.body.classList.add/remove 没有按预期工作

Question

document.body.classList.add/remove 没有按预期工作

当我调用 add() 时，它只将 class 属性添加到 body 元素，但没有附加任何值。同时，如果我手动将类添加到 body 元素然后调用 remove()，什么也不会发生

useEffect(() => {
        document.body.classList.add('overflow-hidden')

        return (
            document.body.classList.remove('overflow-hidden')
        )
    }, [])

这是目前的代码。我希望在首次呈现组件时将“溢出隐藏”类添加到主体元素中，并且我希望在组件关闭时从主体元素中删除“溢出隐藏”类

Answer 1

我认为您对

return

有疑问。它必须返回一个函数，当组件被卸载时这个函数将被调用：

useEffect(() => {
    document.body.classList.add("overflow-hidden");
    return () => {
      document.body.classList.remove("overflow-hidden");
    };
  }, []);