React16.x操作dom实现聊天记录框滚动

背景:
我用React做了一个聊天记录的窗口,每当来了新消息或者自己回复了消息之后,需要让聊天记录的那个框自己滚动到最底部,显示最新的消息。

思路:当有新消息的时候,就将新消息push到数组中,这个数组是放在store中受到观察的。那么在数组的内容发生变化的时候,组件就会重新渲染,在生命周期的:componentDidUpdate中,然后在这个生命周期中,拿到聊天记录框的dom,进行scroll就OK了。

在旧版本的React中,采用的是

ref='name'
this.refs.name

这样的形式,要知道在新版本中,this.refs.name这样的形式已经不推荐了,我百度搜了一下,都没有看到有人写一点。自己查了一下文档,得到以下结论:
1.在dom元素上设置ref,这里的ref是一个函数了

<div className='chat-content' ref={(chatContainer) => this.chatContainer = chatContainer}>
....省略具体内容
</div>

这样设置后,在生命周期中,就可以通过this,charContainer来获得dom元素了

  1. 生命周期中滚动到最下端
componentDidUpdate() {
    this.chatContainer.scrollTop = this.chatContainer.scrollHeight
  }

就这么几行代码,就实现了自己的需求,最开始还纠结了很久。
记录下来,作为参考。如能帮助到他人,乐意之至。

推荐阅读更多精彩内容