反应中ref属性的示例分析

　　介绍

这篇文章主要介绍了反应中ref属性的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

概述

首先,裁判和裁判是两个概念,裁判是反应提供的可用特定API创建的一个对象。该对象的结构如下:

这个对象只有一个属性就是电流,那么这个对象是用来干嘛的呢?

参允许我们访问DOM节点或在渲染方法中创建的反应元素。(DOM节点就是指原生DOM元素,在渲染()方法中创建的反应元素就是指反应的类组件元素)

我们可以想象这样一个需求,两个兄弟元素,一个是div,一个是按钮。现在想实现点击按钮,改变div的背景颜色。在原生的DOM技术中,我们可以在按钮的点击函数里使用document.querySelector (& # 39; xxx # 39;)的方式选中div节点,然后改变其背景样式。但是无论是在Vue还反应是这样的框架中,页面元素都是动态生成的,无法使用DOM API获取的方式,而且反应中大部分操作的元素不是原生DOM元素,而反应是元素。那么如何选择到某一个原生DOM元素或者反应元素呢?

其实,理论上,我们不需要进行任何的选择操作,这样会失去前端框架中组件独立的概念,一般情况下是通过组件通信的方式进行事件的处理的。上述的情况可以使用EventBus的方式进行组件通信,按钮的点击事件中进行自定义事件的触发,在div中进行自定义事件的监听,让按钮以事件通知的方式告知div让其改变背景色,而不是在按钮的事件中直接获取div进行操作。

但是反应为我们提供了直接访问DOM元素和元反应素的方式,就是通过。参考文献使用的方式很简单,就是,为想要访问的元素上添加ref属性,将参考文献对象附加到裁判属性上,那么此参时对象的当前属性就不再是空,而是对应的DOM元素或反应元素实例了。

1。参考文献对象的创建

在反应中,创建裁判对象的方式有两种:

1.1 React.createRef ()

使用React.createRef()的方式可以创建一个裁判对象,可通过附加到裁判属性上访问一个原生DOM元素或者类组件。
这种方式既可以在函数组件中使用,也可以在类组件中使用。

1.2 React.useRef (initialValue)

16.8在反应中新增了钩后,又多了一个可以创建裁判对象的钩子上。即React.useRef (initialValue)。
useRef返回一个可变的裁判对象,其.current属性被初始化为传入的参数(initialValue)。返回的裁判对象在组件的整个生命周期内保持不变。
这种方式只能在函数组件中使用。

2。ref属性的使用

ref属性只能被添加到原生DOM元素或者反应的类组件上。不能在函数组件上使用ref属性,因为函数组件没有实例。

若想在函数组件上使用ref属性,可以通过反应。forwardRef将Ref转发到函数组件内部的原生DOM元素上。

2.1为原生DOM元素添加Ref

类类组件内部

class  App  extends  React.Component { 　　,,,构造函数(道具){ 　　,,,,,,,超级(道具) 　　,,,,,,,this.myRef =, React.createRef () 　　,,,}, 　　,,,componentDidMount () { 　　,,,,,,,console.log (this.myRef) 　　,,,,,,,console.log (this.myRef.current) 　　,,,} 　　,,,渲染(){ 　　,,,,,,,return  ( 　　,,,,,,,,,,,& lt; div  ref={this.myRef}祝辞;我是应用组件& lt;/div> 　　,,,,,,,) 　　,,,} 　　}

函数组件内部

const  App =,()=祝辞{ 　　,,,const  myRef =, React.useRef(空) 　　,,,//const  myRef =, React.createRef(),两种创建,ref 对象的方式都可以 　　,,,React.useEffect(()=祝辞{ 　　,,,,,,,console.log (myRef) 　　,,,,,,,console.log (myRef.current) 　　,,,},[]),//模拟生命周期 　　,,,return  ( 　　,,,,,,,& lt; div  ref={myRef}祝辞;我是函数组件内部使用ref的div