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

IT技术 scroll reactjs render
2021-04-07 00:44:02

我有一个问题，我不知道如何解决。在我的 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;
6个回答

最后..我用过：

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

编辑：react v16.8+

useEffect(() => {
  window.scrollTo(0, 0)
}, [])
@Tomasz - 我发现有时当我将某些 div 设置为高度或最小高度时我仍然会遇到这个问题：100%。我不得不将其删除并将其包装在父级中或进一步移动到仍然可以滚动的树中
2021-06-03 00:44:02
对于那些使用钩子的人，以下代码将起作用。 React.useEffect(() => { window.scrollTo(0, 0); }, []); 注意，您也可以直接导入 useEffect：import { useEffect } from 'react'
2021-06-04 00:44:02
据 W3Schools 称，目前所有浏览器都支持该解决方案。此外，ReactDOM 库在 React 的未来版本中将被弃用。
2021-06-06 00:44:02
这对我有用，但在 componentDidMount 下不起作用，因为当状态更改导致页面重新呈现时，可能不会触发 CDM。所以把这个调用——window.scrollTo(0, 0); - 无论在哪里，您都可以更改状态。
2021-06-13 00:44:02
这是唯一对我有用的解决方案。也试过： ReactDOM.findDOMNode(this).scrollTop = 0 and componentDidMount() { this._div.scrollTop = 0 } render() { return <div ref={(ref) => this._div = ref} /> }
2021-06-19 00:44:02

由于原始解决方案是为早期版本的react 提供的，这里是一个更新：

constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
}

componentDidMount() {
  this.myRef.current.scrollTo(0, 0);
}

render() {
    return <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element
default.a.createRef 不是函数
2021-05-24 00:44:02
this.getDOMNode === 未定义
2021-06-07 00:44:02
如果可能，您应该避免使用 ReactDom.findDOMNode()。使用 ref 代替。我在这里发布了使用平滑滚动的解决方案
2021-06-09 00:44:02
this is undefined in arrow functions是不正确的。this 关键字绑定到与封闭函数相同的上下文developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
2021-06-10 00:44:02
@DaveLunny 你可能在 react15 上？尝试导入 ReactDOM 并做 ReactDOM.findDOMNode(this).scrollTop = 0
2021-06-19 00:44:02

你可以使用这样的东西。ReactDom 用于 react.14。否则就做出react。

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

2019 年 5 月 11 日更新 React 16+

  constructor(props) {
    super(props)
    this.childDiv = React.createRef()
  }

  componentDidMount = () => this.handleScroll()

  componentDidUpdate = () => this.handleScroll()

  handleScroll = () => {
    const { index, selected } = this.props
    if (index === selected) {
      setTimeout(() => {
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }

注意：如果 componentDidUpdate 对您不起作用，componentDidMount则是另一种选择。
2021-06-11 00:44:02
在此页面上的所有建议中，这是唯一对我有用的建议。
2021-06-15 00:44:02
findDOMNode 是一个用于访问底层 DOM 节点的逃生舱口。在大多数情况下，不鼓励使用此逃生舱口，因为它刺穿了组件抽象。它已在 StrictMode 中被弃用。reactjs.org/docs/react-dom.html
2021-06-16 00:44:02

在 React Routing 中存在的问题是，如果我们重定向到新路由，它不会自动将您带到页面顶部。

甚至我也有同样的问题。

我只是在我的组件中添加了一行，它就像黄油一样工作。 

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

参考：react训练

如果我将它用于“跳转到顶部”按钮，这是推荐的方式吗？或者如果有一种我们不使用 window 对象的“反应”方式？
2021-06-02 00:44:02
@Toxnyc 所以使用 window 对象就是 Javascript，如果 react 在 Javascript 之上，那么即使您在幕后使用任何 React Plugin，它也将仅使用 Javascript 和 window 对象，据我所知，react 文档没有我们可以通过任何方式获取窗口屏幕的详细信息。我们必须使用 Javascript 才能使其工作。
2021-06-12 00:44:02
感谢您提出通知，我给出的解决方案适用于低于 v5 的 react-router dom 版本，我使用的是 v4.2.2，当您导航到另一个页面时，默认情况下您没有被带到顶部页面，因此我们必须在导航后手动将用户带到页面顶部，但是在 v5.0.1 react-router dom 中停止提供开箱即用的滚动恢复，因为根据他们的文档，他们说浏览器开始支持默认情况下此功能和最新版本的 react-router-dom 您将在导航后带到页面顶部。
2021-06-14 00:44:02

对于那些使用钩子的人，以下代码将起作用。

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

注意，您也可以直接导入 useEffect： import { useEffect } from 'react'

在[]作为第二个参数意味着它只会发生在第一渲染，你试过没有？
2021-05-24 00:44:02
其它你可能感兴趣的问题
上一篇如何在 React 中从另一个组件设置一个组件的状态 下一篇如何在 ReactJS 中使用单选按钮？