在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之设置元素的滚动条的更多相关文章

  1. scrollTop()--返回或设置匹配元素的滚动条的垂直位置

    scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offset 指的是滚动条相对于其顶部的偏移. 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移. ...

  2. javascript 设置元素滚动大小

    3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...

  3. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

  4. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

  5. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  6. js中设置元素class的三种方法小结

     一.el.setAttribute('class','abc'); 代码如下: .abc { background: red; } test div var div = document.getEl ...

  7. jquery设置元素的readonly和disabled

    jquery设置元素的readonly和disabled Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: $( '#line2Tr' ).cs ...

  8. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  9. jQuery使用之(二)设置元素的样式

    css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...

随机推荐

  1. sql 游标 跳出循环 和进入下一个循环

    1  使用break 结束整个循环. 2  使用continue 结束当前循环,进入下已循环. 注意:使用continue造成死循环,是因为continue后又执行与上次相同的fetch了. 解决办法 ...

  2. POJ 2871

    #include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...

  3. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  4. Grape教程-params

    参数 请求参数可以通过params获取,params是一个hash对象,包括GET.POST.PUT参数,以及路径字符串中的任何命名参数: get :public_timeline do Status ...

  5. java工具类-日期工具类

    1.获得时间戳 为了统一其他语言的如php和unix系统获取的时间戳是10位长度的,精确到秒. java时间戳长度是13位,精确到毫秒 我们获取时间戳需要相应处理. //获取当前时间戳,除以1000, ...

  6. 最常用的两种C++序列化方案的使用心得(protobuf和boost serialization)

    导读 1. 什么是序列化? 2. 为什么要序列化?好处在哪里? 3. C++对象序列化的四种方法 4. 最常用的两种序列化方案使用心得 正文 1. 什么是序列化? 程序员在编写应用程序的时候往往需要将 ...

  7. Maven 入门——认识Maven结构

    1.settings.xml 元素解读 localRepository 该元素表示本地 Maven 仓库的地址,不设置的话,默认为 ~/.m2/repository pluginGroups 将插件的 ...

  8. IDA动态调试so文件出现SIGILL

    用ida6.6 调试android的so文件时经常会报SIGILL的错误,意思是指令非法.而且这种错误基本都是发生在系统函数内部,像我遇到过的mmap,fopen,fgets等等.在这些函数内部如果用 ...

  9. Restful API 设计参考原则

    在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...

  10. docker空间管理之清理磁盘占用

    1.docker部署后修改数据存放目录,默认存放到/var/lib/docker下面,修改到一个大的空间目录下面.参考我的另外一篇博客:https://www.cnblogs.com/cuishuai ...