it-swarm.com.de

Scrollen Sie nach dem Rendern in react.js an den Anfang der Seite

Ich habe ein Problem, bei dem ich keine Ideen habe, wie ich das Problem lösen kann.__ In meiner Reakt-Komponente zeige ich unten eine lange Liste von Daten und einige Links an Liste mit neuer Sammlung der Links und müssen nach oben scrollen.

Das Problem ist - wie scrolle ich nach oben nachdem neue Sammlung gerendert wird?

'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;
84

Da die ursprüngliche Lösung für eine sehr frühe Version von reag bereitgestellt wurde, folgt hier ein Update:

constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
}

componentDidMount() {
  this.myRef.current.scrollTo(0, 0);
}

render() {
    return <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element
43

Zum Schluss habe ich gebraucht:

componentDidMount() {
  window.scrollTo(0, 0)
}
164
lxm7

Sie könnten so etwas verwenden. ReactDom ist für React.14. Nur anders reagieren.

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
33
J. Mark Stevens

Dies könnte und sollte wahrscheinlich mit refs behandelt werden:

"... Sie können ReactDOM.findDOMNode als" Escape-Schraffur "verwenden, aber wir empfehlen es nicht, da dies die Kapselung bricht und in fast jedem Fall eine klarere Möglichkeit zur Strukturierung Ihres Codes im React-Modell besteht."

Beispielcode:

class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

    render() {
        return <div ref={(ref) => this._div = ref} />
    }
}
12
GGAlanSmithee

Das kannst du im Router so machen: 

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

onUpdate={() => window.scrollTo(0, 0)} setzt den Bildlauf nach oben ..__ Weitere Informationen finden Sie hier: codepen link

8

Beim Reakt-Routing besteht das Problem, dass Sie nicht automatisch an den Anfang der Seite gelangen, wenn wir zur neuen Route umleiten.

Selbst ich hatte das gleiche Problem.

Ich habe nur die einzelne Zeile zu meiner Komponente hinzugefügt und es hat funktioniert wie Butter. 

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

Verweisen: Reaktionstraining

7
Vishal Shetty

Ich verwende den Reakt-Router ScrollToTop Component, dessen Code in den Reakt-Router-Dokumenten beschrieben wird

https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

Ich ändere den Code in einer einzelnen Routes-Datei und muss danach nicht in jeder Komponente Code ändern.

Beispielcode - 

Schritt 1 - Erstellen Sie die ScrollToTop.js-Komponente

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)

Schritt 2 - Fügen Sie in der App.js-Datei nach <Router die ScrollToTop-Komponente hinzu.

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)
6
Arpit

Hier ist noch ein weiterer Ansatz, mit dem Sie auswählen können, auf welche gemounteten Komponenten die Bildlaufposition des Fensters zurückgesetzt werden soll, ohne dass das ComponentDidUpdate/ComponentDidMount-System doppelt dupliziert wird. 

Im folgenden Beispiel wird die Blog-Komponente mit ScrollIntoView () umbrochen. Wenn sich also die Route ändert, wenn die Blog-Komponente bereitgestellt wird, aktualisiert ComponentDidUpdate des HOC die Bildlaufposition des Fensters.

Sie können es genauso einfach über die gesamte App wickeln, sodass bei jeder Routenänderung ein Fenster-Reset ausgelöst wird.

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 = () => <WrappedComponent {...this.props} />
  }
  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 (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

Das obige Beispiel funktioniert gut, aber wenn Sie zu react-router-dom migriert wurden, können Sie das obige Beispiel vereinfachen, indem Sie eine Render-Requisite erstellen, die die Komponente umschließt. 

Sie können es aber auch genauso einfach über Ihre Routen wickeln (ändern Sie einfach die componentDidMount-Methode in den oben beschriebenen Beispielcode der componentDidUpdate-Methode und wickeln Sie ScrollIntoView mit withRouter).

Funktionsbeispiel: https://codesandbox.io/s/qq4x5x43k9 (Wenn Sie nur auf home klicken, wird die Position des Fensters aktualisiert.)

container/ScrollIntoView.js

import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

components/Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);
5
Matt Carlotta

Dies ist das einzige, was bei mir funktioniert (mit einer ES6-Klassenkomponente):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}
4
danharsanyi

Für diejenigen, die Hooks verwenden, funktioniert der folgende Code.

React.useEffect(() => {
  window.scrollTo(0, 0);
}, []);

Beachten Sie, dass Sie useEffect auch direkt importieren können: import { useEffect } from 'react'

2
Powderham

Wenn Sie dies für mobile tun, wird zumindest mit Chrome unten ein weißer Balken angezeigt.

Dies geschieht, wenn die URL-Leiste ausgeblendet wird. Lösung:

Ändern Sie das CSS für height/min-height: 100% in height/min-height: 100vh.

Google Developer Docs

1
Artur Carvalho

Keine der obigen Antworten funktioniert derzeit für mich. Es stellt sich heraus, dass .scrollTo nicht so gut kompatibel ist wie .scrollIntoView.

In unseren App.js haben wir in componentWillMount() hinzugefügt

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

Dies ist die einzige Lösung, die für uns universell funktioniert. root ist die ID unserer App. Das "flüssige" Verhalten funktioniert nicht bei jedem Browser/Gerät. Die 777-Zeitüberschreitung ist ein bisschen konservativ, aber wir laden auf jeder Seite eine Menge Daten, so dass dies durch Testen notwendig war. Eine kürzere 237 kann für die meisten Anwendungen verwendet werden.

1
Todd

Das alles funktionierte nicht für mich - nicht sicher warum, aber: 

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

arbeitete, wobei HEADER die ID meines Header-Elements ist

1
James Shiztar

Keine der obigen Antworten funktioniert derzeit für mich. Es stellt sich heraus, dass .scrollTo nicht so gut kompatibel ist wie .scrollIntoView.

In unseren App.js haben wir in componentWillMount() hinzugefügt

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

Dies ist die einzige Lösung, die für uns universell funktioniert. root ist die ID unserer App. Das "flüssige" Verhalten funktioniert nicht bei jedem Browser/Gerät. Die 777-Zeitüberschreitung ist ein bisschen konservativ, aber wir laden auf jeder Seite eine Menge Daten, so dass dies durch Testen notwendig war. Eine kürzere 237 kann für die meisten Anwendungen verwendet werden.

0
Todd

Dieser Code führt zu ein reibungsloses Verhalten in der scroll:

<div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

Sie können andere Parameter innerhalb von scrollIntoView () .__ übergeben. Folgende Syntax kann verwendet werden:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop Optional Ist ein boolescher Wert:

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 Optional Ist ein Objekt mit den folgenden Eigenschaften:

*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".

Weitere Details finden Sie hier: MDN-Dokumente

0
Abhay Shiro

In allen Lösungen geht es darum, die Schriftrolle für componentDidMount oder componentDidUpdate hinzuzufügen, jedoch mit dem DOM.

Ich habe das alles gemacht und nicht funktioniert.

Also habe ich einen anderen Weg gefunden, der für mich in Ordnung ist.

componentDidUpdate() { window.scrollTo(0, 0) } in der Kopfzeile hinzugefügt, meine ist aus dem <Switch></Switch> Element. Einfach kostenlos in der App. Funktioniert.

Ich habe auch eine ScrollRestoration Sache gefunden, aber ich bin jetzt faul. Und fürs Erste werde ich es auf die "DidUpdate" Weise behalten.

Ich hoffe es hilft!

sicher sein

0
Buzzcut Season

So etwas funktionierte für mich an einer Komponente:

<div ref="scroller" style={{height: 500, overflowX: "hidden", overflowY: "auto"}}>
      //Content Here
</div>

Dann in welcher Funktion auch immer es um Updates geht:

this.refs.scroller.scrollTop=0
0
kojow7