React 组件加载到页面的一半答案

【问题标题】：React Component Loads Halfway Down The PageReact 组件加载到页面的一半
【发布时间】：2019-03-30 15:42:39
【问题描述】：

我正在构建我的投资组合反应，我遇到了一个问题。在我的主页上，我向下滚动到项目部分，当我点击一个链接查看项目时，新组件加载，但它似乎加载到我之前在我的组件上的相同位置（一半向下页）。有什么办法解决这个问题？

我的项目组件的代码：

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

【问题讨论】：

你能分享你的代码吗？
我以代码和图片为例进行了更新

标签： reactjs react-router components

【解决方案1】：

这绝对是意料之中的，虽然是特殊的行为。您的网页加载，您设置滚动位置，当您以编程方式更改屏幕上显示的内容时，没有任何内容告诉浏览器也以编程方式更新滚动位置。

当我使用路由器时，我通常会包含一个 <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）。

【讨论】：

【解决方案2】：

遇到此问题的任何人的解决方案，在您要加载的新组件中，添加：

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

【讨论】：