ReactJS粘性导航栏使用window.scrollTo滚动到div不起作用

Question

我有一个导航栏功能组件，它通过 onclick 回调将链接的名称传递到父组件，并进一步传递到主应用程序组件。应用程序组件有一个带有链接名称和关联引用的对象。应用程序组件中的 onclick 回调根据底层组件传递给它的链接名称从对象获取引用，并调用 window.scrollTo。 window.scrollTo 在您第一次单击链接时起作用，并且当页面滚动时，如果从粘性导航栏中单击另一个链接，窗口不会再次滚动，而是返回到 (0,0) 并从那里单击相同的链接链接有效。

//App组件中回调。

manageContent(link){

   console.log(this.linksData[link].current)

    window.scrollTo({
        top: this.linksData[link].current.offsetTop,
        left: 0,
        behavior: 'smooth'
     })    
}

以上函数传递给Header组件

<Header links={data} onclick={this.manageContent} ref={this.headerRef}/>

标题中的链接是使用 NavLink 函数组件创建的，其中 onClick 将返回链接名称。

我做错了什么，为什么在页面滚动到顶部后第二次单击时，scrollTo 起作用，而不是从页面中间或从滚动位置开始。

我也尝试了其他滚动功能，但奇怪的是只有scrollTo滚动，而与scrollOptions、scrollToView、moveTo等一起使用的滚动功能根本不起作用。

我在控制台中打印出了 offsetTop 并触发了 window.scrollTo(0,"offsetTop 在控制台中打印")，工作正常，没有任何问题。

这是代码。

App.js

class App extends React.Component {

  constructor(props){
    super(props);
    this.manageContent = this.manageContent.bind(this)

    this.state={}
    this.sectionRef1 = React.createRef();
    this.sectionRef2 = React.createRef();
    this.sectionRef3 = React.createRef();
    this.sectionRef4 = React.createRef();
    this.sectionRef5 = React.createRef();    
    this.headerRef = React.createRef();    
    this.heroRef = React.createRef();
  }
  manageContent(key){
    console.log(key)
    this.setState({key:key});
  }

setActivePage = (key) => {
    let refList = [this.sectionRef1,this.sectionRef2,this.sectionRef3,this.sectionRef4,this.sectionRef5]
    console.log(key)
    console.log(refList[key].current)
    if (refList[key].current){
        window.scrollTo({behavior: "smooth",top: refList[key].current.offsetTop})

    }
}
componentDidUpdate(prevProps, prevState) {  
  console.log("comp updated")
  this.setActivePage(this.state.key)
}
/*
componentDidMount(){
  window.addEventListener('scroll', this.scrollListener)
}
componentWillUnmount() {
  window.removeEventListener('scroll', this.scrollListener)
}    
*/
  render(){     
    return (
      <div className="bp-container-full bp-typography" key="app">
        <Header links={data.links} onclick={this.manageContent} ref={this.headerRef}/>
        <main key="main">
            <HeroSection ref={this.heroRef}/>
            <div className="bp-main">
            <section key="home"className="page" ref={this.sectionRef1}>
              <Home/>
            </section>
            <section key="aboutme" className="page" ref={this.sectionRef2}>
              <AboutMe/>
            </section>
            <section key="sitedetails" className="page" ref={this.sectionRef4}>  
              <SiteDetails/>
            </section>
            <section key="contact" className="page" ref={this.sectionRef5}>  
              <ContactForm/>
            </section>
            </div>
        </main>
        <Footer/>  
      </div>
    );
  }

}
export default App;

Header.js

class Header extends React.Component {
    constructor(props) {
        super(props);
        console.log(props)
        this.linkRef = React.createRef()
        this.state = {isOpen:false};
        this.headerRef = React.createRef()
    }

    render() {      
        const navlink = data.links.map((link,key)=>{ 
            return(
            <a href="#" key={link} ref={this.linkRef}
                    className="nav-list-item bp-upper"
                    onClick={() => this.props.onclick(key)}>
                  {link}
            </a>
        )})
        return (
            <header key="header-key" className={classnames("bp-header","bp-header-fixed",
                            {"is-scrolled":this.state.scrolled})} ref={this.headerRef}>
                <button className={classnames("bp-mobile-menu",{"is-open":this.state.isOpen})} onClick={()=>{this.setState({isOpen:!this.state.isOpen})}}>
                  <i className={classnames("fas", {"fa-bars":!this.state.isOpen, "fa-times":this.state.isOpen})}></i>
                </button>                            
                <div className={classnames("nav", "nav-align-centre",{"is-open":this.state.isOpen})}>
                    <nav className="nav-list nav-primary">
                        {navlink}
                    </nav>
                </div>
            </header>
        )
    }
}
export default Header;

Answer 1

在几乎多次编写整个应用程序后，终于发现了问题。

我的链接有一个 href，是的，愚蠢的我，采用 href="#"解决了问题，并且可能还解释了为什么它在两次点击而不是 1 次点击中起作用。

<a href="#" key={link} ref={this.linkRef}
                    className="nav-list-item bp-upper"
                    onClick={() => this.props.onclick(key)}>
                  {link}
            </a>