时间戳

首页 > 解决方案 > 如何将它变成 React Hooks for useEffect()？

javascript - 如何将它变成 React Hooks for useEffect()？

问题描述

我想用它把它变成反应钩子，useEffect但它一直给我一个错误。当我使用useEffect.

componentDidMount() {
    window.addEventListener("scroll", () => {
        const isTop = window.scrollY < 100;

        const img = document.getElementById("logo-img");
        const name = document.getElementById("name");

        if (isTop) {
            img.classList.remove("logo-small");
            name.classList.remove("no-display");
        } else {
            img.classList.add("logo-small");
            name.classList.add("no-display");
        }
    });
}

componentWillUnmount() {
    window.removeEventListener("scroll");
}

这就是我将它转换为反应钩子的东西useEffect，当我实现这个时，类名不会被删除或添加

useEffect(() => {
    window.scrollTo(0, 0);

    window.addEventListener("scroll", () => {
        const isTop = window.scrollY < 100;

        const img = document.getElementById("logo-img");
        const name = document.getElementById("name");

        if (isTop) {
            img.classList.remove("logo-small");
            name.classList.remove("no-display");
        } else {
            img.classList.add("logo-small");
            name.classList.add("no-display");
        }
    });
}, []);

标签： javascriptreactjs

解决方案

useLayoutEffect根据文档，您可以尝试使用：

小费

如果您正在从类组件迁移代码，则 note在与和useLayoutEffect相同的阶段触发。但是，我们建议先开始，并且仅在导致问题时才尝试。componentDidMountcomponentDidUpdateuseEffectuseLayoutEffect

推荐阅读