react中ref的使用(useRef,forwardRef,useImperativeHandle,createRef)

2023-10-31 08:20
文章标签 javascript 使用 react frontend ref forwardref useimperativehandle useref createref

本文主要是介绍react中ref的使用(useRef,forwardRef,useImperativeHandle,createRef)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、什么是ref
  • 二、在函数式组件中使用ref
    • 1. useRef 获取dom
    • 2. forwardRef获取子组件的dom
    • 3. useImperativeHandle将某些指定的行为暴露给父组件
  • 三、在类组件中使用ref
    • 1. createRef
    • 2. 回调函数
    • 3. 字符串

一、什么是ref

在React中，ref是一个用于访问真实DOM节点或者React组件实例的对象。它允许您在组件中直接操作DOM元素或组件，而无需遵循传统的数据流。

使用ref，您可以：

  1. 访问和操作DOM：ref允许您通过将ref对象传递给组件中的元素来访问和修改真实的DOM。您可以使用ref来获取输入框的值、改变元素的样式、添加/删除/更新元素等等。

  2. 访问和调用组件方法：ref允许您访问在组件类上定义的方法。这对于在某些情况下需要从父组件中直接访问子组件的方法非常有用。

  3. 获取组件实例和进行事件监听：当使用类组件时，ref可以用来获取组件的实例，以便在需要时进行其他操作。您还可以使用ref来进行事件监听，例如在某个特定的事件发生时执行某些操作。

需要注意的是，在大多数情况下，最好遵循React的数据流原则，尽量避免直接操作DOM或访问子组件的方法。只有当没有其他合适的选择并且确实需要这样做时，才应该使用ref。因为直接操作DOM或访问子组件的方法可能会破坏组件的封装性和可重用性。

二、在函数式组件中使用ref

1. useRef 获取dom

在React中，函数式组件使用ref属性可以获取到组件的实例或者某个Dom元素的引用。使用ref可以让你更方便地控制组件或Dom元素，并且可以在需要的时候访问和修改它们的属性和方法。

要在函数式组件中使用ref，你可以使用React提供的useRef钩子函数。举一个例子，假设我们有一个函数式组件MyComponent，其中包含了一个input元素：

import React, { useRef } from 'react';const MyComponent = () => {const inputRef = useRef(null);const handleClick = () => {// 使用 useRef 返回的 ref 对象来访问 input 的属性和方法console.log(inputRef.current.value);inputRef.current.focus();};return (<div><input ref={inputRef} type="text" /><button onClick={handleClick}>Focus Input</button></div>);
};export default MyComponent;

上述例子中，我们使用useRef钩子函数来创建了一个名为inputRef的引用。我们将这个引用传递给了input元素的ref属性，这样就可以通过inputRef.current来获取该input的引用。

在函数式组件的handleClick函数中，我们可以通过inputRef.current访问到input元素并获取到它的值。我们还可以使用inputRef.current.focus()来让input元素获得焦点。

通过使用ref，我们可以方便地操纵组件或Dom元素，进行一些需要访问或修改属性和方法的操作。
注意，ref只能在函数式组件中使用，并且不能在函数式组件的子组件上使用

2. forwardRef获取子组件的dom

在React中，函数式组件的子组件上可以使用forwardRef来使用ref。forwardRef函数可以将ref传递给子组件，从而在子组件中使用ref。

下面是一个示例，展示了如何在函数式组件的子组件中使用ref：

import React, { forwardRef } from 'react';// 子组件
const ChildComponent = forwardRef((props, ref) => {return (<input type="text" ref={ref} />);
});// 父组件
const ParentComponent = () => {// 创建一个refconst inputRef = React.createRef();// 使用ref传递给子组件return (<div><ChildComponent ref={inputRef} /><button onClick={() => inputRef.current.focus()}>聚焦输入框</button></div>);
};export default ParentComponent;

在上面的例子中，ChildComponent是一个函数式组件，通过将ref作为forwardRef的第二个参数，将其传递给内部的input元素。然后，可以在ParentComponent中创建一个ref并将其传递给ChildComponent。这样，我们就可以在父组件中操作子组件的input元素，例如调用focus()方法。

在按钮的onClick事件处理函数中，我们可以通过inputRef.current来获得子组件的input元素，并调用它的focus()方法将焦点聚焦到输入框上。

3. useImperativeHandle将某些指定的行为暴露给父组件

在React中，通过使用useImperativeHandle钩子函数，函数式组件可以将某些指定的行为暴露给父组件。这在一些情况下非常有用，例如限制某些DOM行为，让父组件能够直接操作该组件的某些功能。

下面是一个例子，演示如何使用useImperativeHandle来限制DOM行为：

import React, { useRef, useImperativeHandle, forwardRef } from 'react';// 子组件
const ChildComponent = forwardRef((props, ref) => {const childRef = useRef(null);// 定义待暴露的函数useImperativeHandle(ref, () => ({// 在这里暴露特定的DOM行为focus: () => {childRef.current.focus();},// 在这里暴露特定的DOM行为blur: () => {childRef.current.blur();}}));return <input ref={childRef} />;
});// 父组件
const ParentComponent = () => {const childRef = useRef(null);const handleFocus = () => {childRef.current.focus();  // 子组件的focus函数被父组件调用};const handleBlur = () => {childRef.current.blur();   // 子组件的blur函数被父组件调用};return (<div><ChildComponent ref={childRef} /><button onClick={handleFocus}>Focus</button><button onClick={handleBlur}>Blur</button></div>);
};export default ParentComponent;

在上面的例子中，ChildComponent是一个简单的函数式组件，它包含了一个<input>元素。通过使用useImperativeHandle钩子函数，并将ref作为第一个参数传递进去，我们可以定义需要暴露给父组件的函数（在这里是focus和blur）。这意味着父组件可以通过ref引用子组件，然后直接调用子组件的focus和blur函数。

在ParentComponent中，通过使用useRef来创建一个childRef引用。然后，在handleFocus和handleBlur函数中，通过childRef.current来访问ChildComponent函数组件的focus和blur函数，从而直接操控子组件的DOM行为。

这样，我们就可以在父组件中通过按钮点击来控制子组件的DOM行为，实现了对DOM行为的限制。

三、在类组件中使用ref

1. createRef

在类式组件中，可以使用React.createRef()来创建一个ref对象，然后将该ref对象附加到component的一个元素上，通过ref对象可以引用该元素并对其进行操作。

下面是一个使用ref的示例：

import React from "react";class MyComponent extends React.Component {constructor(props) {super(props);this.myDivRef = React.createRef(); // 创建一个ref对象}handleClick = () => {this.myDivRef.current.style.backgroundColor = "blue"; // 使用ref对象引用元素并对其进行操作}render() {return (<div><div ref={this.myDivRef}>Hello, world!</div> {/* 将ref对象附加到元素上 */}<button onClick={this.handleClick}>Change Color</button></div>);}
}export default MyComponent;

在上面的示例中，我们首先在类的构造函数中创建一个ref对象myDivRef。然后，通过将myDivRef作为<div>元素的ref属性值，我们可以将ref对象附加到这个元素上。在handleClick方法中，我们通过this.myDivRef.current引用该元素并改变其背景颜色为蓝色。

这样，当点击按钮时，就会调用handleClick方法，从而改变被ref引用的<div>元素的背景颜色。

2. 回调函数

通过回调函数来设置ref，在回调函数中将DOM元素分配给组件的实例属性。在组件的实例中，可以通过属性来访问该DOM元素。

import React, { Component } from 'react';class ExampleComponent extends Component {constructor(props) {super(props);this.myRef = null;this.setRef = element => {this.myRef = element;};}componentDidMount() {console.log(this.myRef); // 访问DOM元素}render() {return <div ref={this.setRef}>Example</div>;}
}

3. 字符串

使用字符串的ref属性来获取DOM元素。这种方式在React v16.3之前是支持的，但在较新的版本中已经过时，不建议使用。

import React, { Component } from 'react';class ExampleComponent extends Component {componentDidMount() {console.log(this.refs.myRef); // 访问DOM元素}render() {return <div ref="myRef">Example</div>;}
}

这篇关于react中ref的使用(useRef,forwardRef,useImperativeHandle,createRef)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/314022。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2