React-获取DOM方式refs

于 2023-08-07 10:20:22 发布
阅读量249 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43748856/article/details/132140820
版权
本文介绍了React中ref的两种主要用法：在HTML元素和自定义组件上的使用，以及在函数式组件中通过React.forwardRef获取DOM元素的技巧。特别指出ref不能在函数组件上直接使用，但提供了转发ref的解决方案。
摘要由CSDN通过智能技术生成

一、ref的类型
1、ref的值根据节点的类型而有所不用：
·当ref属性用于HTML元素时，构造函数中使用React.createRef()创建接收底层DOM元素作为其current属性；
·当ref属性用于自定义class组件时，ref对象接收组件的挂载实例作为其current属性
·不能在函数组件上使用ref属性，因为他们没有实例
2、函数式组件是没有实例的，所以无法通过ref获取他们的实例：
·但是某些时候，我们可能想要获取函数式组件的某个DOM元素
·这个时候我们可以通过React.forwardRef，
·后续会学习hooks中如何使用ref。

二、ref的转发
1、由于ref不能应用于函数式组件（因为函数式组件没有实例，所以不能获取到对应的组件对象）
2、但是，在开发中我们可能想要获取函数式组件中某个元素的DOM，这个时候我们应该如何操作呢？
方式一：直接传入ref属性（❎的做法）
方式二：通过forwardRef高阶函数
在这里插入图片描述

秃头大学生破晓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <input type="text" ref="myTextInput" /> <input type="button" value="Focus t
react中ref获取DOM元素
weixin_51255484的博客
06-28 688
react中ref获取DOM元素
React中获取DOM元素
qq_51130780的博客
07-08 1581
ref获取对应DOM元素对象
react ref属性dom操作
fortunegrant的博客
11-05 735
https://www.cnblogs.com/xiaohuochai/p/8625445.html 注意，函数式组件不能使用ref，因为他们没有实例 函数式组件是什么，具体参照一下链接 https://www.cnblogs.com/wonyun/p/5930333.html https://segmentfault.com/a/1190000007553885  ...
在react组件中获取DOM元素的三种方式
weixin_54206707的博客
07-02 1285
1, 给标签设置ref属性, 通过this.refs调用 (老版本语法,将要废除)2, 在构造器中创建ref全局变量, 在标签中ref属性动态绑定这个全局变量, 通过全局变量的current字段调用3, 在标签ref属性绑定函数, 在函数中定义全局变量赋值, 通过全局变量调用4, 使用hook语法查找DOM5, 使用hook语法查找DOM。
前端开源库-react-dom-core
08-30
4. **Refs**：React的`ref`属性允许开发者在组件实例上创建引用，这样就可以直接访问DOM元素或React组件实例，进行一些需要直接操作的场景。 5. **错误边界（Error Boundaries）**：React 16引入了错误边界，这是一...
react-类似LinkedState但用于Refs支持Preact与React
08-14
`refs`在React中是一种特殊的属性，可以让我们在组件的生命周期方法中获取到真实DOM元素或函数组件的实例。这通常用于直接操作DOM，例如获取输入值、调用自定义方法等。而在Preact中，`refs`的工作方式与React基本...
react-refs:用CodeSandbox创建
04-16
在React中，引用（Refs）是一种机制，允许我们直接访问DOM元素或React组件实例。它们在需要进行某些直接操作，如触发某个特定DOM元素的事件处理，或者在生命周期方法之外更新组件状态时非常有用。本教程将通过...
React之Refs&DOM
01-20
最近开发时遇到了关于ref的使用，看了文档之后了解到refs的使用在16.3版本之后已经出现了变更，就此记录一下 16.3之后版本的Ref推荐用法(React.createRef())： 1.简单使用： // 代码引入了typeScript // 通过...
react-0.14.3 构建包
最新发布
06-11
React TestUtils Add-on：修复了浅渲染和函数引用（refs）的 bug。 React CSSTransitionGroup Add-on：修复了在快速挂载和卸载时导致超时不正确触发的 bug。 React on Bower：添加了 react-dom-server.js，以支持在...
react中获取dom节点和全局上下文
weixin_50902154的博客
05-02 3014
同vue一样，说是尽量不操作dom,数据驱动视图，实际上免不了需要dom的时候 React.createRef(); 通过该api在构造器中创建一个用于绑定dom节点的变量 用于绑定dom节点的变量 通过.current来获取真实dom this.textInput.current.focus(); class CustomTextInput extends React.Component { constructor(props) { super(props); //..
React hooks中如何通过ref获取到原生dom节点
YFCookie的博客
03-12 3583
通过ref进行name绑定，通过创建变量使用useRef，通过name.curren进行取值
React Hooks的详细介绍
AMD23的博客
03-22 426
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。 在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 1.代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读..
react使用ref获取DOM报Function components cannot be given refs.
qq_46433453的博客
11-03 1007
解决useRef 获取函数式组件的警告
React 基础 useEffect 操作 DOM
zengxingX的博客
12-14 2606
使用技巧 参数：在获取DOM 时 ，一般都设置Null 返回值：返回一个带有 Current 属性的对象，通过该对象可以得到DOM对象或者类组件实例 useEffect 获取DOM 1.使用useRef 创建一个有 current 属性的 ref 对象，{current：null} const xxxRef = useRef(null) 2.通过DOM 的ref 属性 和上面创建的对象进行关联 <div ref={xxxRef}></div> 3. 通过 x.
React获取DOM和获取组件实例的方式
热门推荐
m0_71485750的博客
10-03 1万+
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;
在react中获取dom元素
weixin_45052838的博客
09-22 1万+
1、ref获取dom元素 <div ref={el => this.nodeEle = el}> ====> this.nodeEle即为获取到的元素 2、根据id获取dom元素 document.getElementById(“idName”) 3、通过类名获取dom元素 document.getElementsByClassName(“className”) 获取到的是一个数组集 4、根据标签名获取dom元素 document.getElementsByTagName(‘标
react——ref获取原生DOM元素
牟童的博客
08-19 1959
一. ref 用于HTML标签元素中 <h2 ref=字符串/对象/函数>h2元素<h2> 其中，字符串形式 官方已不再推荐使用 1.对象形式 import React, { Component,createRef } from 'react' export default class App extends Component { constructor(){ super(); this.titleRef=creat...
react获取dom的方法
05-23
在 React 中，获取 DOM 的方法主要有以下几种： 1. 使用 ref 属性 在组件中添加 ref 属性，可以在组件的 componentDidMount 或 componentDidUpdate 生命周期方法中通过 this.refs.xxx 获取到该组件的 DOM 节点。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值