React之设置元素的滚动条
在React中,解耦了对DOM元素的操作,但有时我们确实需要对DOM操作,比如设置元素的滚动条,这时ref就满足了我们的需求
在低版本的react中,ref可以是一个string类型的属性,通过this.refs.[refString]来获取相应的DOM元素,但在高版本的react中已被弃用
在高版本中的ref可以是React.createRef()创建ref属性 ,也可以是回调函数,我们可以在构造函数中使用React.createRef()来创建一个ref属性
例如: this.testRef = React.createRef(); // 创建ref属性
<div ref={this.testRef} /> //将创建的ref属性作为一个元素的ref
this.testRef.current //获取元素
ref
的更新会发生在componentDidMount
或 componentDidUpdate
生命周期钩子之前,所以我们可以在componentDidMount
或 componentDidUpdate中处理业务需求
注意:不能在函数式组件上使用 ref
属性,因为它们没有实例,但可以在函数式组件内部使用ref
虽然不能在函数式组件上直接使用ref,但我们可以像组件之间传递参数一样来传递ref
例如: render() {
const TestRefFunc = (props) => {
return (
<div ref={props.testRef}>
);
}
return (
<TestRefFunc testRef={(el) => this.testRefEle = el} />
);
}
知道了在react中如何获取DOM元素,那么就可以对DOM元素操作,设置元素的滚动条,代码如下
componentDidMount() { // 进入组件
this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;
}
componentUpdateMount() { // 刷新组件
this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;
}
React之设置元素的滚动条的更多相关文章
- scrollTop()--返回或设置匹配元素的滚动条的垂直位置
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. ...
- javascript 设置元素滚动大小
3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- 【JQuery插件】元素根据滚动条位置自定义吸顶效果
;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...
- JQuery_DOM 简介/设置元素及内容
一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...
- js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 代码如下: .abc { background: red; } test div var div = document.getEl ...
- jquery设置元素的readonly和disabled
jquery设置元素的readonly和disabled Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: $( '#line2Tr' ).cs ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jQuery使用之(二)设置元素的样式
css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...
随机推荐
- sql 游标 跳出循环 和进入下一个循环
1 使用break 结束整个循环. 2 使用continue 结束当前循环,进入下已循环. 注意:使用continue造成死循环,是因为continue后又执行与上次相同的fetch了. 解决办法 ...
- POJ 2871
#include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- Grape教程-params
参数 请求参数可以通过params获取,params是一个hash对象,包括GET.POST.PUT参数,以及路径字符串中的任何命名参数: get :public_timeline do Status ...
- java工具类-日期工具类
1.获得时间戳 为了统一其他语言的如php和unix系统获取的时间戳是10位长度的,精确到秒. java时间戳长度是13位,精确到毫秒 我们获取时间戳需要相应处理. //获取当前时间戳,除以1000, ...
- 最常用的两种C++序列化方案的使用心得(protobuf和boost serialization)
导读 1. 什么是序列化? 2. 为什么要序列化?好处在哪里? 3. C++对象序列化的四种方法 4. 最常用的两种序列化方案使用心得 正文 1. 什么是序列化? 程序员在编写应用程序的时候往往需要将 ...
- Maven 入门——认识Maven结构
1.settings.xml 元素解读 localRepository 该元素表示本地 Maven 仓库的地址,不设置的话,默认为 ~/.m2/repository pluginGroups 将插件的 ...
- IDA动态调试so文件出现SIGILL
用ida6.6 调试android的so文件时经常会报SIGILL的错误,意思是指令非法.而且这种错误基本都是发生在系统函数内部,像我遇到过的mmap,fopen,fgets等等.在这些函数内部如果用 ...
- Restful API 设计参考原则
在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...
- docker空间管理之清理磁盘占用
1.docker部署后修改数据存放目录,默认存放到/var/lib/docker下面,修改到一个大的空间目录下面.参考我的另外一篇博客:https://www.cnblogs.com/cuishuai ...