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如何设置页面的样式风格.包括添加 ...
随机推荐
- idea安装破解永久有效
首先先在下面地址下载好idea安装包 链接:https://pan.baidu.com/s/1gVl3WAjC_H6jrH2cjK1paw提取码:i2t5 再下载好破解所需的jar包 链接:https ...
- android(java) 开发过程中经验及总结记录
android(java) 开发过程中经验及总结记录
- 计算机网络 之 TCP协议报文结构
前言:上学期实训课,由于要做一个网络通信的应用,期间遇到各种问题,让我深感计算机网络知识的薄弱.于是上网查找大量的资料,期间偶然发现了roc大神的博客,很喜欢他简明易懂的博文风格.本文受roc的< ...
- [原] ubuntu 13.10 安装 winqq2013
安装及下载地址:http://www.longene.org/forum/viewtopic.php?t=4700 ubuntu 13.10 64位系统安装后无法启动qq,因为缺少程序包.解决方案: ...
- ThreadPoolExecutor策略配置以及应用场景
ThreadPoolExecutor 是用来处理异步任务的一个接口,可以将其理解成为一个线程池和一个任务队列,提交到 ExecutorService 对象的任务会被放入任务队或者直接被线程池中的线程执 ...
- 利用cygwin创建windows下的crontab定时任务
要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Cygwin-1.7.35 下载地址 环境下载 什么是Cygwin Cygwin是一个在windows平台上运行的类U ...
- C/C++求职宝典21个重点笔记(常考笔试面试点)
这是我之前准备找工作时看<C/C++求职宝典>一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...
- postgresql逻辑结构--用户及权限管理(七)
一.用户和角色 二.创建用户和角色 三.权限管理 四.
- SpringMVC之文件上传
上传是web程序中常见的功能,当使用上传时,需要把form表单中的enctype属性改为multipart/form-data,这样就使用了二进制进行上传,而后台需要解析这些数据.Dispatcher ...
- Python常见问题
1. 处理中文时出现的错误'ascii' codec can't decode byte 0xe9 in position 0: ordinal not in range(128)" 解决方 ...