React学习笔记-----ref

最新推荐文章于 2024-08-03 16:44:35 发布
最新推荐文章于 2024-08-03 16:44:35 发布
阅读量438 收藏 1
点赞数
文章标签： reactjs
原文链接：https://www.cnblogs.com/lanpang9661/p/12604712.html
版权
本文详细介绍了React中ref的三种使用方法：字符串引用、createRef和函数式引用，强调了它们在不同场景下的应用。字符串引用已不推荐，createRef提供对DOM节点的直接访问，而函数式引用则用于父组件调用子组件方法。尽管ref提供了直接操作DOM的能力，但React提倡数据驱动，应避免过度使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ref在react初期的时候是用于方便操纵dom元素的,就类似于document.getElementById()这种形式,获取dom树中的某个dom节点.

到现在为止,主要有三种使用形式

方式1: string类型绑定

类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom

注意的是 这种方式已经不被最新版的react推荐使用，有可能会在未来版本中遗弃

 

方式2: react.CreateRef()

通过在class中使用React.createRef()方法创建一些变量，可以将这些变量绑定到标签的ref中

那么该变量的current则指向绑定的标签dom

 

方式3: 函数形式

在class中声明函数，在函数中绑定ref

使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法

 

 

注意: react并不推荐过度使用ref，如果能通过state做到的事情，就不应该使用 refs 在你的 app 中“让事情发生”。
过度使用ref并不符合数据驱动的思想

 

iblackboy
关注
React学习笔记--进阶之路
JackieDYH的博客
08-12 694
react框架 * react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库 react官网：https://react.docschina.org/ react不是一个完整的MVC框架，最多可以认为是MVC中的V（View） react引入了虚拟DOM机制 react引入了组件化思想 react使用facebook专门为其开发的一套语法糖--jsx 使用注意事项-jsx语法 注意事项 jsx语法 * 标签内容内属性 例如 *
React学习笔记-详细版（项目搭建，JSX基础使用，组件通信，事件绑定）
m0_62300955的博客
03-07 362
react基础知识，事件绑定，组件通信
React：组件实例三大属性之(refs)
Continue的博客
07-08 581
文章目录概述使用方式1.String类型的Refs(过时)2.回调形式使用 概述 作为react实例组件三大属性之一，refs主要用来获取真实DOM元素或者组件实例的属性。 使用方式 1.String类型的Refs(过时) String类型的使用相对是很容易理解的，但是其存在一些问题已经过时不再推荐使用。 1.通过ref=“字符串名”进行ref声明 2.通过this.refs.字符串名 获取 class MyComponent extends React.Component{ r
react ref 获取dom数组
不懂先生的博客
01-24 1294
如下文 class App extends React.Component { constructor() { super(); this.domRefs = [] } handleClick() { console.log(this.domRefs); } render() { return <> <div onClick={this.handleClick.bind(this)} > <ul&
react组件放在数组中_在 React 组件中使用 Refs 指南
weixin_42533751的博客
01-24 977
(给前端大全加星标，提升前端技能)英文：Yomi Eluwande 译文：joking_zhanghttps://segmentfault.com/a/1190000019277029使用 React 时，我们的默认思维方式应该是 不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。React 中的 Refs 提供了一种访问 rend...
React 使用ref绑定 增加删除数组
qq_39233028的博客
11-08 835
1.增加 <input ref="title" ></input> <button onClick={this.addData}>增加+</button> addData=()=>{ var temp=this.state.list ; temp.push(this.refs.title.value); this.refs.title.value='' ;
react 中 ref 管理列表
qq_42501092的博客
11-16 993
react ref 数组
react+react-beautiful-dnd实例代办事项_ react-beautiful-dnd教程(2)
2401_84182906的博客
04-28 616
newTaskIds.splice(destination.index,0,this.props.todos[source.index]) // 在移动到的位置初放置被删除的数组。const newTaskIds=Array.from(this.props.todos) // 转化为真正的数组。source: {index: 5, droppableId: ‘columns’} // 移动的第5个事件。newTaskIds.splice(source.index,1) // 删除移动的数组。
React学习笔记---面向组件编程
丑小鸭变黑天鹅的博客
12-20 789
React学习笔记---面向组件编程
React学习笔记---组件的生命周期
丑小鸭变黑天鹅的博客
12-20 298
组件的生命周期
react中ref的使用
胡老大的唯一大老婆的博客
05-16 860
react获取元素DOM的两种方式 1、e.target 2、ref <input id=“insertArea” className=‘input’ value={this.state.inputValue} onChange={this.handleInputChange} ref={(input) => {this.input=input}} /> ranhou ...
React中如何使用ref
qq_45149366的博客
04-25 2361
React如何使用ref
react中动态生成ref进行操作
皮蛋solo粥的博客
05-23 2470
import { useRef, useState,useEffect } from 'react'; import './Seven.scss'; import gof from './imgs/sevenbj.png' function Seven() { const [sss, setsss] = useState(9) const refs = [] //存储ref的数组 const [ren, setRen] = useState([ { .
React 组件的3大属性: refs
嗯...
10-31 488
字符串 Refs 是 React 中的一种创建 Refs 的方式，但自 React 16.3 版本开始，官方不再推荐使用它，因为它存在一些潜在的问题，比如性能问题和可维护性问题。以下是一个简单的 React 示例，演示如何使用 Refs 来管理焦点，具体是将焦点从一个输入框移动到另一个输入框。回调 Refs 的优点是它们在更早的 React 版本中是有效的，并且能够很好地用于访问 DOM 元素或子组件的实例。钩子可以在函数式组件中方便地创建和访问Refs，以及执行与Refs相关的操作，而无需使用类组件。
【React】深入解析ref的使用与潜在问题
最新发布
lph159的博客
08-03 1227
本文深入探讨了React中ref的使用及其常见问题。通过理解ref的工作原理和正确的使用方法，我们可以避免常见的错误，提高开发效率和用户体验。静态与动态ref的使用：了解何时需要使用ref以及如何正确地使用它们。错误分析与解决方法：识别并修复由于不正确的ref使用导致的问题。开发中的最佳实践：通过调试、测试和代码审查，确保代码的正确性和可维护性。
react动态绑定ref
臧小川的博客
02-29 1228
【代码】react动态绑定ref。
react中ref中有变量时采用的引用方式
All things will be fine__
04-03 1263
react中ref引用一般有两种写法： 回调函数用法： <Form ref={(f) => this.form = f}}></Form> 引用方式： this.form.isValid() 字符串用法： <Form ref='form'></Form> 引用方式： this.refs['form'].isValid...
React中ref属性的使用
suwu150
05-29 6844
1、在ref使用的过程中，需要注意的是： 0.14.8版本及以前用 this.getDOMNode() 或者 this.findDOMNode(this.refs.tip) 15.0版本后用 ReactDOM.findDOMNode(this.refs.tip); 2、我们通过代码进行对ref的学习：如下面代码： &lt;html&gt; &lt;head&gt; &lt;m...
学习小结：react基础，获取ref的三代方式
m0_59093266的博客
02-11 1937
我将以三代ref的获取方式来实现一个点击按钮就会弹窗显示input输入的内容 第一代：以字符串的方式获取： class Demo extends React.Component { render() { return ( <div> <input type="text" ref="input" /> // 在虚拟dom上以 ref=??? 的方式添加 <button onClick={this.show.
使用react-beautiful-dnd实现美丽且可访问的拖放功能
4. **课程内容的趣味性和实用性**：课程中介绍了如何创建一个可以拖放和重新排序的应用程序，这不仅展示了`react-beautiful-dnd`库的实用性，也体现了学习过程中的乐趣。 5. **无障碍性（Accessibility）的关注**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值