reactjs - 在react.js中渲染后滚动到页面顶部
我有一个问题,我没有想法,如何解决。在我的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(
{ this.state.section.name }
Next Section
);
} else {...}
}
});
module.exports = Checklist;
Andrew asked 2019-05-21T03:09:47Z
14个解决方案
151 votes
最后..我用过:
componentDidMount() {
window.scrollTo(0, 0)
}
lxm7 answered 2019-05-21T03:09:58Z
38 votes
我通过添加:解决了这个问题:
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollTop = 0
},
Andrew answered 2019-05-21T03:10:21Z
29 votes
你可以使用这样的东西。 ReactDom用于反应.14。 只是反应。
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
J. Mark Stevens answered 2019-05-21T03:10:45Z
12 votes
这可能,也可能应该使用refs来处理:
“...你可以使用ReactDOM.findDOMNode作为”逃生舱“但我们不推荐它,因为它打破了封装,几乎在所有情况下都有更清晰的方法在React模型中构建代码。”
示例代码:
class MyComponent extends React.Component {
componentDidMount() {
this._div.scrollTop = 0
}
render() {
return
}
}
GGAlanSmithee answered 2019-05-21T03:11:17Z
8 votes
您可以在路由器中执行此操作:
ReactDOM.render((
window.scrollTo(0, 0)} history={browserHistory}>
), document.getElementById('root'));
滚动顶部的onUpdate={() => window.scrollTo(0, 0)}。有关更多信息,请查看:[http://codepen.io/Yuschick/post/react-reset-scroll-position-when-changing-routes]
Ana Maria Cabrera answered 2019-05-21T03:11:48Z
5 votes
我正在使用react-router ScrollToTop组件,其代码在react-router docs中描述
[https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top]
我正在更改单个Routes文件中的代码,之后不需要在每个组件中更改代码。
示例代码 -
第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文件中,在
const App = () => (
)
Arpit answered 2019-05-21T03:12:45Z
5 votes
这是另一种方法,允许您选择希望窗口滚动位置重置为哪个已安装的组件,而不会大量复制ComponentDidUpdate / ComponentDidMount。
下面的示例是使用ScrollIntoView()包装Blog组件,因此如果在安装Blog组件时路由发生更改,则HOC的ComponentDidUpdate将更新窗口滚动位置。
您可以轻松地将其包裹在整个应用程序上,这样在任何路径更改时,它都会触发窗口重置。
ScrollIntoView.js
import React, { Component } from 'react';
import { withRouter } from 'react-router';
export default WrappedComponent => {
class ResetWindowScroll extends Component {
componentDidUpdate = (prevProps) => {
if(this.props.location !== prevProps.location) window.scrollTo(0,0);
}
render = () =>
}
return withRouter(ResetWindowScroll);
}
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';
export default (
);
上面的示例效果很好,但如果您已迁移到componentDidMount,则可以通过创建包装组件的渲染道具来简化上述操作。
再次,您也可以轻松地将其包裹在您的路线上(只需将componentDidMount方法更改为上面编写的componentDidUpdate方法示例代码,以及将ScrollIntoView包装为withRouter)。
工作示例:[https://codesandbox.io/s/qq4x5x43k9](仅点击主页更新窗口位置)
集装箱/ ScrollIntoView.js
import { PureComponent, Fragment } from "react";
class ScrollIntoView extends PureComponent {
componentDidMount = () => window.scrollTo(0, 0);
render = () => this.props.children
}
export default ScrollIntoView;
组件/ Home.js
import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";
export default () => (
Sample Text
);
matt carlotta answered 2019-05-21T03:14:11Z
4 votes
这是唯一对我有用的东西(使用ES6类组件):
componentDidMount() {
ReactDOM.findDOMNode(this).scrollIntoView();
}
danharsanyi answered 2019-05-21T03:14:36Z
3 votes
在React Routing中,存在如下问题:如果我们重定向到新路由,则它不会自动将您带到页面顶部。
即使我确实有同样的问题。
我刚刚将单行添加到我的组件中,它就像黄油一样。
componentDidMount() {
window.scrollTo(0, 0);
}
参考:[https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top]
Vishal Shetty answered 2019-05-21T03:15:20Z
1 votes
所有这些都不适合我 - 不知道为什么但是:
componentDidMount(){
document.getElementById('HEADER').scrollIntoView();
}
工作,其中HEADER是我的标题元素的ID
James Shiztar answered 2019-05-21T03:15:52Z
0 votes
如果你这样做是为了移动,至少使用chrome,你会在底部看到一个白色条。
当URL栏消失时会发生这种情况。 解:
更改高度/最小高度的css:100%到高度/最小高度:100vh。
[https://developers.google.com/web/updates/2016/12/url-bar-resizing]
Artur Carvalho answered 2019-05-21T03:16:36Z
0 votes
此代码将导致滚动上的平滑行为:
ReactDOM.findDOMNode(this.headerRef)
.scrollIntoView({behavior: "smooth"});
}}
className='go-up-button' >
你可以在scrollIntoView()中传递其他参数可以使用以下语法:
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
alignToTop可选 是一个布尔值:
If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
scrollIntoViewOptions可选 是具有以下属性的Object:
*behavior* Optional
Defines the transition animation.
One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
One of "start", "center", "end", or "nearest". Defaults to "nearest".
更多细节可以在这里找到:[https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView]
Abhay Shiro answered 2019-05-21T03:17:27Z
0 votes
这样的东西对我有用:
//Content Here
然后在任何处理更新的函数中:
this.refs.scroller.scrollTop=0
kojow7 answered 2019-05-21T03:17:58Z
0 votes
所有解决方案都讨论了在componentDidUpdate() { window.scrollTo(0, 0) }或上添加滚动,但是使用DOM。
我做了所有这些并没有奏效。
所以,想出一些对我来说很好的方法。
添加 componentDidUpdate() { window.scrollTo(0, 0) } 在标题上,我的是元素。 只需在应用程序中免费。 作品。
我也发现了一些ScrollRestoration的东西,但我现在很懒。 现在要保持“DidUpdate”的方式。
希望能帮助到你!
注意安全
Buzzcut Season answered 2019-05-21T03:18:58Z