componentDidUpdate scroll nach unten, wenn Element geladen wird

Question

ich eine Liste habe ich nach unten scrollen will, muss ich meine Komponente wie diese

class Msg extends Component { 

    componentDidUpdate() { 

     if(this.container){ 
      this.container.scrollTop = this.container.scrollHeight 
     } 
    } 

    render() { 
     return(
      <div ref={elem = this.container = elem}> 
       <Item /> 
       <Item /> 
       <Item /> 
      </div> 
     ) 
    } 
} 

codiert Es funktionierte. Aber das Problem ist, dass es jedes Mal scrollt, wenn die Komponente neu rendert. Msg hat viele untergeordnete Komponenten, löst den Status der untergeordneten Komponente aus, damit die Msg-Komponente erneut gerendert wird. Wie löst man dieses Problem?

Um es wie ein normaler Benutzer zu erklären:

Benutzerrollen auf der Liste, klicken Sie dann auf Dropdown irgendwo löste die componentDidUpdate, nach unten gescrollt verursacht.

Answer 1

Um zum ersten Mal nach unten zu scrollen, wenn die Komponente gerendert wird, sollten Sie componentDidMount lifecycle hook verwenden.

Wenn Sie möchten, dass die Liste bei jedem Hinzufügen eines Elements einen Bildlauf durchführt, können Sie componentDidUpdate Hook verwenden, wie Sie jetzt verwenden, aber anstatt scrolltop jedes Mal zu bearbeiten, überprüfen Sie, ob sich die Anzahl der Elemente geändert hat. Jetzt legen Sie den Bildlauf bei jeder Aktualisierung der Komponente fest.

componentDidUpdate bekommt beide vorherigen Requisiten und früheren Zustand als Parameter, so können Sie so etwas schreiben:

componentDidUpdate(prevProps, prevState) { 
    if (this.props.items.length > prevProps.items.length) { 
     this.refs.container.scrollTop = this.refs.container.scrollHeight; 
    } 
} 

Hier ist eine gute Referenz für reagiert Lifecycle Haken: http://busypeoples.github.io/post/react-component-lifecycle/

Answer 2

Verwendung so etwas wie dieses add ein leeres div am Ende der Liste

<div ref="blankdiv"></div>

dann in jedem componentDidMount Scroll div dies in Bildschirm

this.refs.blankdiv.scrollIntoView()