在react.js中渲染后滚动到页面顶部

我有个问题，我不知道怎么解决。在我的react组件中，我在底部显示了一个很长的数据列表和一些链接。点击任何链接后，我在列表中填充了新的链接集合，需要滚动到顶部。

问题是-如何滚动到顶部后，新的集合呈现?

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;

当前回答

在反应路由有一个问题，如果我们重定向到新的路由，那么它不会自动带你到页面的顶部。

就连我也有同样的问题。

我只是将单行添加到组件中，它就像黄油一样工作。

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

参考:反应训练

2018-06-13 01:47:09

其他回答

没有什么对我有用，除了:

componentDidMount(){

    $( document ).ready(function() {
        window.scrollTo(0,0);
    });
}

2020-06-04 20:18:22

我正在使用react-router ScrollToTop组件，该组件的代码在react-router文档中描述

https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

我在单个路由文件中更改代码，之后不需要在每个组件中更改代码。

示例代码-

步骤1 -创建ScrollToTop.js组件

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

步骤2 -在App.js文件中，在<Router后添加ScrollToTop Component

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

2018-02-09 11:44:26

对于React v18+，我的建议是使用包装器组件，这将是最简单的执行方式。

步骤1:创建一个ScrollToTop组件(component/ScrollToTop.js)

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

步骤2:用index.js包装你的应用程序

<React.StrictMode>
  <BrowserRouter>
    <ScrollToTop />
    <App />
  </BrowserRouter>
</React.StrictMode>

解释:每次路径名更改时，useEffect将被调用以将页面滚动到顶部。

2022-08-09 09:57:21

在功能组件中使用hook，假设在结果道具中有更新时组件更新

import React, { useEffect } from 'react';

export const scrollTop = ({result}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [result])
}

2019-10-29 11:17:08

我有一段时间也有同样的问题。添加窗口。scrollTo(0,0);到每个页面都是痛苦和冗余的。所以我添加了一个HOC，它将包装我所有的路由，它将留在BrowserRouter组件:

 <ScrollTop>
    <Routes />
  </ScrollTop>

在ScrollTopComponent内部，我们有以下内容:

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollTop = (props) => {
  const { children } = props;

  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return <main>{children}</main>;
};

export default ScrollTop;

2020-12-21 12:56:44

在react.js中渲染后滚动到页面顶部

推荐文章

最新文章

标签