项目的要求是一个chartUI方式的聊天显示页面，根据聊天信息的不断增加，页面需要滑动一定距离，这样能看到最新的聊天结果，这样就需要在聊天结果返回之后触发滚动条向下滚动到一定的距离，代码如下：

componentDidUpdate(){

        document.documentElement.getElementsByClassName("speakLineW")[0].scrollTop = 550;//内容更新以后再设置

    }

componentDidUpdate 是在组件更新结束之后执行，在初始化render时不执行，

所以触发滚动条的事件写在了 componentDidUpdate 这个周期

												


											
React篇-滚动条下移的触发在react的生命周期分析的更多相关文章
	

    
								
  1. 玩转 React（五）- 组件的内部状态和生命周期
		
    文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...
    
		
    2. 
						
  2. React.js 小书 Lesson20 - 更新阶段的组件生命周期
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
    
		
    3. 
						
  3. React 学习笔记（1） 基础语法和生命周期
		
    参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...
    
		
    4. 
						
  4. 【React】学习笔记（二）——组件的生命周期、React脚手架使用
		
    原教程视频:ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.组件的生命周期 1.1.生命周 ...
    
		
    5. 
						
  5. react 入坑笔记（六） - 组件的生命周期
		
    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...
    
		
    6. 
						
  6. Unity3D热更新之LuaFramework篇[06]--Lua中是怎么实现脚本生命周期的
		
    前言 用c#开发的时候,新建的脚本都默认继承自Monobehaviour, 因此脚本才有了自己的生命周期函数,如Awake,Start, Update, OnDestroy等. 在相应的方法中实现游戏 ...
    
		
    7. 
						
  7. React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
    
		
    8. 
						
  8. React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...
    
		
    9. 
						
  9. React每隔0.2s颜色变淡 之生命周期 ，componentDidMount表示组件已经挂载
		
    05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 一个手写的 http client
			
    public class HTTPClient { public static final String GET = "GET"; public static final Stri ...
    
			
    2. 
						
  2. 我的Mac Pro coding环境配置
			
    新装了OS X 10.11.1. 记录一下开发用得到的一些玩意,方便下次再次配置. homebrew国内源:http://mirrors.tuna.tsinghua.edu.cn/help/#home ...
    
			
    3. 
						
  3. 更改linux下文件目录权限、拥有者及用户组
			
    在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建者,谁创 ...
    
			
    4. 
						
  4. webpack 运行提示“The ‘mode‘ option has not been set”的原因和解决方法
			
    最近在研究webpack,当我执行npm run build / npm start / npm run server等命令时,都是提示下面的警告信息 WARNING in configuration ...
    
			
    5. 
						
  5. 八、K3 WISE 开发插件《工业单据老单插件中获取登陆用户名》
			
    备注:如果是BOS新单,都有获取用户名的方法.在单据有m_BillInterface.K3Lib.User.UserId,在序时薄有m_ListInterface.K3Lib.User.UserID  ...
    
			
    6. 
						
  6. css3整理--background-size
			
    background-size语法: /*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || ...
    
			
    7. 
						
  7. nuxt项目中vue报错The client-side rendered virtual ...
			
    报错: 翻译过来是: [Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配.这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失.Bailing水化和执行完整的客户端渲染.  ...
    
			
    8. 
						
  8. 欢迎访问新博客(pfzheng.tech)
			
    这两天折腾了几天的服务器,搞了一个临时的个人博客. 最先入手的域名pfzheng.tech,但是发现竟然不支持备案.天哪,我做错了什么,只好再买域名.新域名pfzheng.cn正在备案中. 新博客基于 ...
    
			
    9. 
						
  9. linux命令之间的分号，&&， ||
			
    在用linux命令时候, 我们经常需要同时执行多条命令, 那么命令之间该如何分割呢? 分号: 顺序地独立执行各条命令, 彼此之间不关心是否失败, 所有命令都会执行. &&  : 顺序执 ...
    
			
    10. 
						
  10. Django----Admin流程
			
    Admin执行步骤 启动文件: 1:创建app-----stark 2:在每个app中创建stark 3:django----admin---- 4:在stark中写入:--------------- ...
    
			
    11.