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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

由于原始解决方案是为 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

以上是 在react.js中渲染后滚动到页面顶部 的全部内容， 来源链接： utcz.com/qa/400932.html

回到顶部