将 Jquery 转换为 Javascript(React)答案

【问题标题】：Converting Jquery to Javascript(React)将 Jquery 转换为 Javascript(React)
【发布时间】：2021-12-18 15:04:10
【问题描述】：

嗨，我希望你有一个美好的一天，我刚刚进入 React 并试图将我的旧代码转换为 React 但事情是我的旧代码是 Jquery 而我很难将其转换为 Vanilla Javascript。

这是我的旧代码：

function progress() {
    var windowScrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var progress = (windowScrollTop / (docHeight - windowHeight)) * 100;

    var bgColor = progress > 99 ? "#fff" : "#fff";
    var textColor = progress > 99 ? "#fff" : "#333";

    $("h1").text(Math.round(progress) + "%").css({ color: textColor });

    $(".fill").height(progress + "%").css({ backgroundColor: bgColor });
}

progress();

到目前为止我做了什么：

let progress = () => {
    let windowScrollTop = window.onscroll;
    let docHeight = document.offsetHeight;
    let windowHeight = window.offsetHeight;
    let progress = (windowScrollTop / (docHeight - windowHeight)) * 100;

    let bgColor = progress > 99 ? "#fff" : "#fff";
    let txtColor = progress > 99 ? "#fff" : "#333";      

    document.querySelector("h1").innerHTML = Math.round(progress) + "%";     
    document.querySelector("h1").style.color = bgColor;
            
    document.querySelector(".fill").innerHTML = Math.round(progress) + "%";    
    document.querySelector(".fill").style.color = txtColor;         
}

progress();

最后是 Math.round() 显示 NaN

对于所有的麻烦，我真的很抱歉，我希望你能帮助我解决我的问题。谢谢

【问题讨论】：

You should probably start at the beginning。 React 有一个非常具体的更新 DOM 的过程，你不应该使用像 querySelector 这样的原生 DOM 方法。
现在尝试使用 useRef
还是一样的好先生
请参阅How to Ask。您的要求非常广泛，似乎包含多个问题。你需要问一些更具体的问题，而且你的标题应该反映那个明确的问题。
安迪在上面给出了很好的建议。您不是在编写 react 代码，而是在编写类似 jQuery 的 DOM 操作并将其包装在 react 中，这将使您两全其美。

标签： javascript jquery reactjs

【解决方案1】：

在代码中搜索和玩耍后，我终于得到了答案

let windowScrollTop = document.documentElement.scrollTop
let docHeight = document.documentElement.offsetHeight   
let windowHeight = window.innerHeight

【讨论】：

这些东西在 SO 上都有很好的介绍。请试一试搜索框。