我有个问题，我不知道怎么解决。
在我的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;
你可以用这样的东西。ReactDom是react的缩写。否则只需React即可。
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
2019年5月11日更新React 16+
构造函数(道具){
超级(道具)
这一点。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)
｝
｝
你可以用这样的东西。ReactDom是react的缩写。否则只需React即可。
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
2019年5月11日更新React 16+
构造函数(道具){
超级(道具)
这一点。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)
｝
｝
以上答案目前对我来说都没用。事实证明，. 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;
｝
