javascript - window.scrollTo(0, 240) 不适用于 componentDidMount()

Question

我正在使用 Reactjs 和 Gatsby 构建一个网站。

我的问题是window.scrollTo(0, 240)，componentDidMount()如果我刷新网站，它运行良好。但是当我使用 Gatsby Link 组件时，网站并没有到设定的位置。

我还放了一个 console.log，它可以很好地查看函数是否运行。

此外，我window.scrollTo(0,240)直接在浏览器控制台中运行它也可以正常工作。

import React, { Component} from 'react'

import HeroHeader from "../components/HeroHeader"
import NavBar from "../components/NavBar"
import TopFooter from "../components/TopFooter"
import BottomFooter from "../components/BottomFooter"
import MainContent from "../components/MainContent"

class WebPage extends Component {

  componentDidMount() {
    window.scrollTo(0, 240)
    console.log("Webpage Mounted")
  }

  render() {

    // window.scrollTo(0, 240)

    return(
      <>
        <HeroHeader />
        <NavBar />
        <MainContent>
          {this.props.children}
        </MainContent>
        <TopFooter />
        <BottomFooter />
      </>
    )
  }
}

export default WebPage

期望在运行componentDidMount().

标签： javascriptreactjsgatsby

Answer 1

componentDidMountexecutes 仅适用于初始渲染，您应该使用componentDidUpdatewhich 将在每次重新渲染时执行，

componentDidUpdate(){
   window.scrollTo(0, 240)
}