项目的要求是一个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. js中的hasOwnProperty
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    2. 
						
  2. C - Building Fence
			
    Long long ago, there is a famous farmer named John. He owns a big farm and many cows. There are two  ...
    
			
    3. 
						
  3. UDP协议的例子
			
    public class Service { // 服务器         public static void main(String[] args) {               Datagra ...
    
			
    4. 
						
  4. PHP计算两个经纬度地点之间的距离
			
    /**  * 求两个已知经纬度之间的距离,单位为米  *   * @param lng1 $ ,lng2 经度  * @param lat1 $ ,lat2 纬度  * @return float 距 ...
    
			
    5. 
						
  5. MongoDB数据库基础
			
    MongoDB简介 MongoDB是一种文档型的非关系型数据库(NoSQL),举例如下: {“foo”:,"greeting":"Hello,world!"}  ...
    
			
    6. 
						
  6. python爬虫之网页解析
			
    CSS Selector 与Xpath path = ‘D:\\Postgraduate\\Python\\python_projects\\Python视频 分布式 爬虫Scrapy入门到精通\\第 ...
    
			
    7. 
						
  7. Nodejs----学习路线
			
    一:javascript基础 1.语法 2.数据类型 3.操作符 4.语句 5.函数 6.变量 7.Object 类型 8.基本包装类型 9.Global 对象 10.Math 对象 11.初始化和检 ...
    
			
    8. 
						
  8. 怎样将flac音频格式转换成MP3格式
			
    Flac音频格式怎样转换成MP3格式呢?随着现在音频格式的不断多样性,生活中很多时候我们都会遇到音频格式转换的问题,如flac音频转MP3的问题,那么我们应该如何去解决这个问题呢?下面我们就一起去来一 ...
    
			
    9. 
						
  9. WordOperate
			
    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
    
			
    10. 
						
  10. python字符串魔法
			
    test = 'alEx' print(test.capitalize()) # 首字母大写 其他都变小写 print(test.casefold()) # 变小写 更牛逼 print(test.lo ...
    
			
    11.