react页面渲染之前_reactjs - 在react.js中渲染后滚动到页面顶部

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

this._div = ref} />

}

}

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