项目的要求是一个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. SQL Server -- 随笔
			
    -- 判断是否存在 LimeNextMonthBirthday 表 ) PRINT '存在' ELSE PRINT'不存在' -- 如果存在 则删除 没有 则打印 不存在 ) DROP TABLE L ...
    
			
    2. 
						
  2. Mac OSX安装启动 zookeeper
			
    安装 zookeeper支持brew安装 ➜ ~ brew info zookeeper zookeeper: stable (bottled), HEAD Centralized server fo ...
    
			
    3. 
						
  3. 转载：浅谈 Scala 中下划线的用途
			
    Scala 作为一门函数式编程语言,对习惯了指令式编程语言的同学来说,会不大习惯,这里除了思维方式之外,还有语法层面的,比如 underscore(下划线)就会出现在多种场合,令初学者相当疑惑,今天就 ...
    
			
    4. 
						
  4. css布局 - 垂直居中布局的一百种实现方式（更新中...）
			
    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
    
			
    5. 
						
  5. Bitcoin源代码编译安装详解
			
    一.安装准备 安装环境:虚拟机Ubuntu 16.04 内存:2G 错误1:如果这里内存分配为1G,则会产生如下错误: g++ : internal compiler error: Killed (p ...
    
			
    6. 
						
  6. 美团店铺评价语言处理以及分类（tfidf，SVM，决策树，随机森林，Knn，ensemble）
			
    第一篇 数据清洗与分析部分 第二篇 可视化部分, 第三篇 朴素贝叶斯文本分类 支持向量机分类 支持向量机 网格搜索 临近法 决策树 随机森林 bagging方法 import pandas as pd ...
    
			
    7. 
						
  7. G - SDOI
			
    The Annual National Olympic of Information(NOI) will be held.The province of Shandong hold a Select( ...
    
			
    8. 
						
  8. bash 的相关配置
			
    bash 参数自动补全 请安装 bash-completion bash 提示符 说明:参考文档 1. 简洁风格 if [[ ${EUID} == 0 ]] ; then PS1='\[\033[01 ...
    
			
    9. 
						
  9. redis数据持久化的两种方式
			
    1,AOF AOF持久化以日志的形式记录服务器所处理的每一个写.删除操作,查询操作不会记录,以文本的方式append记录,可以打开文件看到详细的操作记录.(相同数量的数据集而言,AOF文件通常要大于R ...
    
			
    10. 
						
  10. atoi函数的用法
			
    库函数原型: #inclue <stdlib.h> int atoi(const char *nptr); 用法:将字符串里的数字字符转化为整形数.返回整形值. 注意:转化时跳过前面的空格 ...
    
			
    11.