React Scroll-Position festlegen, bevor Komponente

Question

montieren habe ich die folgenden Komponente reagieren, die

render(){ 
    const messages = this.props.messages; 
    return(
     <div id="project_chat"> 
     <h1>{this.props.project[0].project}</h1> 
     <div className="chat_room"> 

      <div className="messages" ref="messages"> 
      <Waypoint onEnter={this.activateWayPoint}/> 
      <ul> 
       {messages.map((message) => { 
       return(
        <Message key={uuid.v4()} message={message}/> 
       ) 
       })} 
      </ul> 
      </div> 

      <div className="chat_message_box"> 
      <input type='text' onChange={this.handleChange} value={this.state.message} className="message_box" placeholder="enter message"/> 
      <button className="submit_message" onClick={this.handleSubmit}>Submit</button> 
      </div> 

     </div> 

     </div> 
    ) 
    } 

das Problem i-Box an der obersten Position des Behälters beginnt die Chat-Nachrichten konfrontiert im Wesentlichen eine Chat-Box (Scroll-Position beginnt an der Spitze). Ich wollte, dass die Scroll-Position wie ein normaler Chat-Raum unten ist.

so habe ich versucht, dies zu tun:

componentDidMount(){ 
    this.refs.messages.scrollTop = this.refs.messages.scrollHeight 
    } 

dies löst, nachdem die Komponente d.h montiert wird - die Bildlaufposition Meldungsfeld beginnt zunächst an der Spitze und zwingt zum Boden seinen Weg auf machen.

das ist normalerweise in Ordnung, aber ich benutze eine Bibliothek namens react-waypoint, die mir paginate Chat-Nachrichten helfen würde. Dies wird jedes Mal ausgelöst, wenn ich oben im Container bin.

Die unglückliche Konsequenz ist, dass der Wegpunkt beim mount immer ausgelöst wird, weil das Meldungsfenster am Anfang anfängt.

meine Frage ist, ob ich die Nachrichtenkomponente in der unteren Position nach unten zu Beginn an die Spitze zu beginnen und gehe im Gegensatz zu beginnen zwingen kann

Ich habe versucht, dies zu tun

componentWillMount(){ 
    this.refs.messages.scrollTop = this.refs.messages.scrollHeight 
    } 

die Problem ist, ich habe keinen Zugriff auf Refs bevor die Komponente mounts. Gibt es einen anderen Weg?

Answer 1

Was Sie wollen, ist zu vermeiden this.activateWayPoint bevor Sie scrollTop festgelegt haben.

Sie können dies tun, indem Sie zunächst eine Statusvariable waypointReady auf false setzen. Setzen Sie es in componentDidMount auf True.

Dann können Sie this.activateWayPoint ändern, um this.state.waypointReady zu überprüfen, und sofort zurückkehren, wenn es falsch ist.

// inside component 
getInitialState() { 
    return { waypointReady : false } 
} 
componentDidMount() { 
    this.refs.messages.scrollTop = this.refs.messages.scrollHeight; 
    this.setState({ waypointReady : true}); 
} 
activateWayPoint() { 
    if (! this.state.waypointReady) return; 
    // Your code here! 
    // ... 
} 

Sie werden wahrscheinlich this in Ihrem render Funktion binden:

// ... 
<Waypoint onEnter={this.activateWayPoint.bind(this)}/> 
// ... 

Alternativ kann anstelle der Prüfung innerhalb this.activateWayPoint durchführen, müssen Sie möglicherweise die Überprüfung innen durchführen machen:

// ... 
<Waypoint onEnter={ 
    this.state.waypointReady ? 
    this.activateWayPoint : 
    null 
    }/> 
// ... 

Dies setzt voraus, dass Ihre Komponente jedes Mal neu gerendert wird, wenn Sie setState.