javascript - 每次在组件渲染时 react : window.scrollTo(0,0)

Question

我正在使用 React 构建一个投资组合网站，我想模仿典型网站的行为。当我单击某个特定项目时，我会被路由到一个新 URL，但是，滚动条的位置与“上一页”页面上的位置保持不变，除非第一次单击某个项目(如果我单击后退按钮并单击新项目，滚动条处于相同位置)。我希望每次单击项目时窗口都能滚动到顶部。

class Project extends React.Component {
    render() {
        let project = this.props.project;
        let linkTo = "/work/" + project.id;

        return (
             <figure>
                <img src={project.thumbnail} />
                <figcaption>
                    <h3>{project.title}</h3>
                    <p>{project.type}</p>
                </figcaption>
                <Link to={linkTo} />
             </figure>
        )
    }
}

export default Project;

单击“Project”组件会将您引导至“work/:id”，它会呈现 ProjectDetail 组件。

class ProjectDetail extends React.Component {
    // componentDidMount() {
    //  window.scrollTo(0,0);
    // }

    // componentWillUpdate() {
    //  window.scrollTo(0,0);
    // }

    render() {
        // window.scrollTo(0,0);
        let project = PROJECTS.find((item) => item.id == this.props.params.id);
        return (
            <DetailMain project={project} />
        )
    }
}

export default ProjectDetail;

因此，每次渲染项目组件时，我希望窗口滚动到顶部。您可以看到我一直在尝试让滚动功能​​发挥作用的地方。

Answer 1

我能够使用此处提供的代码解决我的问题:https://github.com/rackt/react-router/issues/2144

var history = createBrowserHistory();

history.listen(location => {
  // Use setTimeout to make sure this runs after React Router's own listener
  setTimeout(() => {
    // Keep default behavior of restoring scroll position when user:
    // - clicked back button
    // - clicked on a link that programmatically calls `history.goBack()`
    // - manually changed the URL in the address bar (here we might want
    // to scroll to top, but we can't differentiate it from the others)
    if (location.action === 'POP') {
      return;
    }
    // In all other cases, scroll to top
    window.scrollTo(0, 0);
  });
});

var routes = (
  <Router history={history}>
    // ...
  </Router>
);

这似乎暂时有效，直到某些东西集成到react-router中为止。