反应组件在页面中间加载

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）。