当前位置: 首页 > article >正文

【react全家桶学习】react组件中的ref属性(详)

不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref。

而Vue中的ref可能比较简单(直接this.$refs.xxx就可以),这一篇主要讲一下如何在React中使用ref。

定义:

ref是reference的简写,它是一个引用,在react中,我们使用ref来操作DOM。

使用:

【refs的字符串形式】已经被弃用

了解就行了。

虽然点击按钮可以打印input1,但控制台会报错。提示报错信息,翻译为: 

在一个严格模式树中找到了一个字符串ref“input1”。字符串引用是潜在错误的来源,应该避免。我们建议使用useRef()  或createRef()

【回调ref】

 简写形式:

<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据" />

这样就不会报错了 

 补充:回调ref中回调执行次数问题---了解就行,不需要解决

【官方回答】如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。

【createRef的使用】

React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点。

createRef 是 **React v16.3 ** 新增的API,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

Refs 是使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素。

Refs 通常在 React 组件的构造函数中定义,或者作为函数组件顶层的变量定义,然后附加到 render() 函数中的元素


http://www.kler.cn/news/17259.html

相关文章:

  • K8S之HPA自动扩缩容机制
  • 【五一创作】QML、Qt Quick /Qt中绘制圆形
  • 第四章 数据关联分析方法
  • C/C++每日一练(20230504)
  • [Leetcode] 0697.数组的度
  • api 和 implementation 区别
  • 最大和+翻硬币(蓝桥杯JAVA解法)
  • 【python】创建python包
  • 浅谈MySQL索引以及执行计划
  • 自定义类型:结构体
  • Windeployqt 打包,缺少DLL 的原因分析,解决方法
  • 【网络】网络基础入门
  • Bean的作用域和生命周期
  • Splunk 转移数据之collect 命令
  • 功能齐全的 DIY ESP32 智能手表设计之PCB介绍
  • 一篇带你快速入门DDD领域驱动设计
  • 【JavaEE初阶】简单了解wait和notify方法~
  • MySQL 精选 35 道面试题大厂稳了(含答案)
  • 真无线耳机哪款性价比高?高性价比无线耳机排行榜
  • Apache POI,springboot中导出excel报表
  • Websocket的基本认识、使用与封装
  • JavaScript:数组---二分法
  • 【笔试强训选择题】Day7.习题(错题)解析
  • 看我如何通过帮助服务台轻松黑掉数百家公司
  • selenium自动化面试题回答
  • KeepAlived高可用环境搭建
  • JavaScript:二叉树(层序遍历)
  • Python | 人脸识别系统 — 人脸识别
  • Linux线程:互斥锁mutex的使用
  • 什么是Spring FactoryBean?有什么作用?