React组件在页面中途加载一半

Question

我正在建立自己的投资组合以应对问题，而我遇到了麻烦。在我的主页上，我向下滚动到“项目”部分，当我单击链接查看该项目时，将加载新的组件，但它的加载位置似乎与我以前在组件上的位置相同（在页）。有什么办法解决吗？

我的项目组件的代码：

<Project
        thumbnail={ProjectBg}
        title={this.state.MyHumberTitle}
        description={this.state.MyHumberDesc}
        type={this.state.MyHumberType}
        path={this.state.MyHumberPath}
      />

Answer 1

解决此问题的人的方法，在要加载的新组件中，添加：

componentDidMount() {
    window.scrollTo(0, 0)
  }

Answer 2

尽管是特殊行为，但这绝对是预期的。您的网页加载，设置滚动位置，并且当您以编程方式更改屏幕上显示的内容时，没有任何内容告诉浏览器也以编程方式更新滚动位置。

在使用路由器时，通常会包含一个<ScrollToTop>组件，用于监听路由更改，如此处所述：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md。

似乎您没有使用路由器，因此您需要将程序化滚动更新与状态的某些变化联系在一起。只要状态发生变化以呈现新的信息页面，您就需要滚动回到顶部。

无论如何，这是您要重置滚动条的方法：

window.scrollTo(0, 0)

您可能会将其绑定到componentDidUpdate函数或useEffect调用中，并以适当的状态作为更改条件（第二个，数组arg）。