如何在React中动态计算像素高度？

Question

我正在使用React-scroll，它对我的​​手机非常有效，但是在较小的手机屏幕上，它会过度滚动。因此，我试图弄清楚如何在按下链接滚动时计算像素高度，因此，假设在我的项目链接上方，我想在项目标题上方滚动5％或类似50px的位置。但是要在所有设备上保持一致吗？

 scrollToAbout=()=>{
        scroll.scrollTo(800)
    }

    scrollToProjects=()=>{
        scroll.scrollTo(2000)
    }

    scrollToContact=()=>{
        scroll.scrollTo(2950)
    }


    render(){
        return(
        <nav className='navbar'>
            <Link 
            style={{color:`${this.state.highLightHome}`}}
            activeClass='highLight'
            to="home"
            smooth={true}
            offset={-0}
            duration={1000}
            >Home
            </Link>

            <Link 
            style={{color:`${this.state.highLightAbout}`}}
            activeClass='highLight'
            onClick={this.scrollToAbout}
            smooth={true}
            offset={-80}
            >About
            </Link>

            <Link 
            style={{color:`${this.state.highLightProjects}`}}
            activeClass='highLight'
            onClick={this.scrollToProjects}
            smooth={true}
            offset={-50}
            >Projects
            </Link>


            <Link 
            style={{color:`${this.state.highLightContact}`}}
            activeClass='highLight'
            onClick={this.scrollToContact}
            smooth={true}
            offset={0}
            >Contact
            </Link>

        </nav>
        )

这是我正在滚动的代码，如果有人有任何想法，只需好奇即可。

感谢您的帮助！