首页 > 其他分享 >react 实现聊天界面,发送消息自动到底部

react 实现聊天界面,发送消息自动到底部

时间:2023-06-02 09:35:07浏览次数:40  
标签:messagesEnd 界面 发送 react 聊天 scrollToBottom

<div style={{ float:"left", clear: "both" }}
                         ref={(el) => { this.messagesEnd = el; }}>
</div>      
  scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "auto" });
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    const { message } = this.state;
    this.scrollToBottom();

  }
  componentDidMount() {
      this.scrollToBottom();
}

 

标签:messagesEnd,界面,发送,react,聊天,scrollToBottom
From: https://www.cnblogs.com/wuyongcong/p/17450879.html

相关文章

  • React 配置文件 | 配置本地IP地址和端口号
    问题create-react-app默认端口号是3000,当有的别的项目占用该端口号时自己想使用别的端口号时方法1、更改node_modulesa.依次打开“node_modules”—“react-scripts”—“scripts”文件夹,找到并打开start.js文件;b.在start.js文件中查找并修改“DEFAULT_PORT”项的端口值即......
  • 2万聊天词库机器人词库ACCESS数据库
    最近ChatGPT很火暴,机器人聊天很多年前就已经开始有了,只不过国内一直都是很浅显的应用,这几年又随着小米同学、新能源汽车的语音控制又有所发展,国外的ChatGPT对汉语的理解还不是很透彻,还需要大量的学习过程。这个聊天词库是从QQ机器人插件中提取出来的,但是有些分类没有导出,比如歇后......
  • react项目,或者vue项目。手动隐藏warning。保持控制台的清晰
    非常感谢您的指正和提醒,我的回答中使用了arguments对象,而这不是一个好的实践。可以使用ES6的剩余参数(restparameters)来代替arguments对象。以下是使用剩余参数替换arguments对象的示例代码:importReactfrom'react';importReactDOMfrom'react-dom';constconsol......
  • Android基于TCP的局域网聊天通信
    概述在同一局域网内,两台设备通过TCP进行通信聊天。详细一、准备工作开发环境jdk1.8 EclipseLunaServiceRelease1(4.4.1)运行环境:华为荣耀6(Android4.4)、华为p9(Android7.0)实现功能:同一局域网下,两台设备进行tcp通信聊天。二、程序实现工程截图:2、实现思路Androi......
  • 界面控件DevExpress ASP.NET新主题——Office 365暗黑主题的应用
    DevExpressASP.NET WebFormsControls拥有针对Web表单(包括报表)的110+种UI控件,DevExpressASP.NETMVCExtensions是服务器端MVC扩展或客户端控件,由轻量级JavaScript小部件提供支持的70+个高性能DevExpressASP.NETCoreControls,包含功能完善的报表平台。在之前发布的v22.1版......
  • 【React工作记录七十七】React+hook+ts+ant design封装一个input和select搜索的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析首先我们需要实现......
  • 分析| React Native和Flutter在移动开发中的优势
    移动应用架构描述了设计和构建应用的模式与技术。该架构可以提供构建应用时应遵循的路线图和最佳实践,构建一个结构合理的应用。移动应用的常见层次结构包括用户界面层、业务逻辑层、数据访问层,但是随着跨平台开发框架的不断发展,以ReactNative、Flutter为代表的工具已经深入到移动......
  • 【React工作记录七十八】React+hook+ts+ant design封装一个table的组件
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析在前端项目中最常......
  • 新型探索:React Native与小程序容器技术的结合
    ReactNative是由Facebook开发并于2015年首次发布的一个框架,用于构建原始的移动应用程序。它具有许多技术上的优势:跨平台开发:使用ReactNative,您可以使用相同的代码库构建同时运行在iOS和Android平台上的应用程序。这种跨平台的开发方式可以大大减少开发工作量和时间成本,因为您不需......
  • React Native+小程序容器=更高的开发效率
    ReactNative是由Facebook开发并于2015年首次发布的一个框架,用于构建原始的移动应用程序。它具有许多技术上的优势:跨平台开发:使用ReactNative,您可以使用相同的代码库构建同时运行在iOS和Android平台上的应用程序。这种跨平台的开发方式可以大大减少开发工作量和时间成本,因为......