背景:
我用React做了一個(gè)聊天記錄的窗口，每當(dāng)來了新消息或者自己回復(fù)了消息之后，需要讓聊天記錄的那個(gè)框自己滾動(dòng)到最底部，顯示最新的消息。
思路：當(dāng)有新消息的時(shí)候，就將新消息push到數(shù)組中，這個(gè)數(shù)組是放在store中受到觀察的。那么在數(shù)組的內(nèi)容發(fā)生變化的時(shí)候，組件就會(huì)重新渲染，在生命周期的:componentDidUpdate中，然后在這個(gè)生命周期中，拿到聊天記錄框的dom，進(jìn)行scroll就OK了。
在舊版本的React中，采用的是
ref='name'
this.refs.name
這樣的形式，要知道在新版本中，this.refs.name這樣的形式已經(jīng)不推薦了，我百度搜了一下，都沒有看到有人寫一點(diǎn)。自己查了一下文檔，得到以下結(jié)論：
1.在dom元素上設(shè)置ref，這里的ref是一個(gè)函數(shù)了
<div className='chat-content' ref={(chatContainer) => this.chatContainer = chatContainer}>
....省略具體內(nèi)容
</div>
這樣設(shè)置后，在生命周期中，就可以通過this,charContainer來獲得dom元素了
- 生命周期中滾動(dòng)到最下端
componentDidUpdate() {
this.chatContainer.scrollTop = this.chatContainer.scrollHeight
}
就這么幾行代碼，就實(shí)現(xiàn)了自己的需求，最開始還糾結(jié)了很久。
記錄下來，作為參考。如能幫助到他人，樂意之至。
