我有个问题,我不知道怎么解决。
在我的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(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;
我正在使用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>
)
你可以用这样的东西。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)
}
}