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
  }

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,885评论 0 24
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,570评论 1 13
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,310评论 0 2
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,052评论 0 1
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,106评论 2 35