REACT設置滾動位置部件安裝

之前我有以下反應組分，其本質上是一個聊天框REACT設置滾動位置部件安裝

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> 
    ) 
    }

我所面臨的問題是聊天消息框開始於所述容器的所述最上面的位置（滾動位置從頂部開始）。我希望滾動位置像普通聊天室一樣處於底部。

，所以我試着這樣做：

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

這AFTER觸發器組件被安裝即 - 消息框滾動位置最初開始於頂部，並迫使其方式上呈現底部。

這通常很好，但我使用的庫叫react-waypoint這將幫助我分頁聊天消息。每次我在容器的頂部時都會觸發它。

令人不快的後果是，因爲消息框最初在mount上從頂部開始，所以在mount上始終會觸發路點。

我的問題是我是否可以強制郵件組件在底部位置開始，而不是開始前和開始

將底部我試着這樣做

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

的問題是我沒有訪問元件安裝前的參考。有沒有其他方法？

來源

2016-07-28 Kannaj

想要的是避免在設置scrollTop之前觸發this.activateWayPoint。

您可以通過最初將狀態變量waypointReady設置爲false來完成此操作。在componentDidMount中將其設置爲true。

然後，您可以修改this.activateWayPoint以檢查this.state.waypointReady，如果它爲假，則立即返回。

// 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! 
    // ... 
}

你可能會綁定this您render函數中：

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

或者，而不是執行內部this.activateWayPoint檢查，你可能會執行檢查內部渲染：

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

這假定您的組件每次重新渲染setState。

來源

2016-07-28 14:10:57

奇妙地工作......謝謝:) – Kannaj

也是'this.refs.messages.scrollTop = this.refs.messages.scrollHeight'確保滾動停留在底部的正確方法？ – Kannaj

@Kunkka它不能確保滾動*保持在底部（當然，因爲你想滾動！）但是，是的，這是我如何建議滾動到底部。 –

REACT設置滾動位置部件安裝

回答

相關問題