我有个问题,我不知道怎么解决。 在我的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;

当前回答

以上答案目前对我来说都没用。事实证明,. scrollto并不像. scrollintoview那样广泛兼容。

在App.js中,我们在componentWillMount()中添加了

this.props.history.listen((location, action) => {
        setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
    })

这是唯一适用于我们的解决方案。root是我们应用的ID。“平滑”行为并不适用于每个浏览器/设备。777的超时有点保守,但我们在每个页面上都加载了大量数据,所以通过测试,这是必要的。更短的237可能适用于大多数应用程序。

其他回答

如果所有人都想做一些简单的事情,这里有一个解决方案,对每个人都适用

添加这个迷你函数

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

从页脚调用函数,如下所示

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

如果你想添加漂亮的样式,这里是CSS

.scroll-to-top { 位置:固定; 右:1快速眼动; 底部:1快速眼动; 显示:没有; 宽度:2.75快速眼动; 高度:2.75快速眼动; text-align:中心; 颜色:# fff; 背景:rgba(90,92,105,0.5); 行高:46 px; }

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

就连我也有同样的问题。

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

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

参考:反应训练

点击后出现的页面,只需在其中写入即可。

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

看起来所有的useEffect例子都没有考虑到你可能想要通过状态改变来触发这个。

const [aStateVariable, setAStateVariable] = useState(false);

const handleClick = () => {
   setAStateVariable(true);
}

useEffect(() => {
  if(aStateVariable === true) {
    window.scrollTo(0, 0)
  }
}, [aStateVariable])

平滑滚动到顶部。在钩子中,你可以在生命周期安装状态中使用此方法进行一次渲染

useEffect(() => {
  window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
}, [])