React@16.x(11)ref

目录

  • 1,介绍
    • 1.1,得到的结果
  • 2,参数类型
    • 2.1,字符串(不再推荐)
    • 2.2,对象
    • 2.3,函数
      • 函数调用时机
  • 3,注意点

1,介绍

reference 引用。和 vue 中的 refs 类似,同样不属于子组件的 props

场景

  • 需要直接操作 DOM 元素。比如让输入框聚焦。
  • 需要使用子组件中的方法。

1.1,得到的结果

  1. 作用于内置 HTML 元素,得到真实DOM对象。
  2. 作用于类组件,得到类的实例对象。
  3. 不能作用于函数组件

举例:

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {handleClick = () => {this.refs.comp.method1();console.log(this.refs.h2.innerText);};render() {return (<><MyComp ref="comp"></MyComp><h2 ref="h2">h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

MyComp 组件:

import React, { Component } from "react";export default class MyComp extends Component {method1 = () => {console.log("子组件的方法");};render() {return <div>子组件</div>;}
}

2,参数类型

render 执行时赋值,所以在 render 中获取为 undefined,在 componentDidMount 中可直接使用。

2.1,字符串(不再推荐)

上面已演示过,不再赘述。

2.2,对象

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {constructor(props) {super(props);this.comp = React.createRef();this.h2 = React.createRef();}handleClick = () => {this.comp.current.method1();console.log(this.h2.current.innerText);};render() {return (<><MyComp ref={this.comp}></MyComp><h2 ref={this.h2}>h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

通过 React.createRef() 创建。该方法返回值就是一个对象,相当于:

constructor(props) {super(props);this.comp = {current: null,};this.h2 = {current: null,};
}

2.3,函数

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {getRefComp = (el) => {this.comp = el;};getRefH2 = (el) => {this.h2 = el;};handleClick = () => {this.comp.method1();console.log(this.h2.innerText);};render() {return (<><MyComp ref={this.getRefComp}></MyComp><h2 ref={this.getRefH2}>h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

如果函数写在 render 中,那当 render 执行时,该函数会执行2次:

import React, { Component } from "react";export default class App extends Component {state = {show: true,};handleClick = () => {this.setState({show: !this.state.show // 想再次执行 render});};render() {return (<><h2ref={(el) => {console.log("el", el);this.h2= el;}}></h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

执行结果:

在这里插入图片描述

函数调用时机

1,render 执行时会调用该函数。

以上面的例子来说,按照执行顺序打印 h2 时,
render 打印 undefined(该函数第一次还没执行),该函数打印 h2 元素,componentDidMount 打印 h2元素。

2,如果 ref 的值发生变动(旧函数被新函数替代),则分别调用旧新函数,时间点在 componentDidUpdate 之前。

  • 旧函数调用时,传递 null
  • 新函数调用时,传递对象。

3,如果 ref 所在组件被卸载,也会调用函数,传递 null

3,注意点

注意使用场景,能使用属性和状态控制,就不要用 ref


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/18136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IEC60870-5-104通信规约 | 报文解析 | 组织报文与解析报文(C++)

文章目录 一、IEC60870-5-104通信规约1.IEC104的报文结构2.IEC104的报文格式--I/U/S格式2.1 I帧2.2 U帧2.3 S帧 3.应用服务数据单元ASDU 二、IEC60870-5-104规约通信过程报文帧解析三、组织报文与解析报文&#xff08;C&#xff09; 一、IEC60870-5-104通信规约 IEC60870-5-104…

golang 守护进程管理

添加守护进程 vim /etc/systemd/system/xxx.service [Unit] DescriptionGo Socket Service Afternetwork.target[Service] Typesimple ExecStart/data/quwan/quwan_ws WorkingDirectory/data/quwan # 停止前发送信号 ExecStop/bin/kill -SIGTERM $MAINPID # 如果超过20s 进程…

笔记-Python lambda

在学习python的过程中&#xff0c;lambda的语法时常会使人感到困惑&#xff0c;lambda是什么&#xff0c;为什么要使用lambda&#xff0c;是不是必须使用lambda&#xff1f; 下面就上面的问题进行一下解答。 1、lambda是什么&#xff1f; 看个例子&#xff1a; 1 g lambda…

什么是GPT-4o,推荐GPT-4o的获取使用方法,使用GPT4o模型的最新方法教程(2024年5月16更新)

2024年5月最新GPT-4o模型使用教程和简介 2024年5月最新GPT-4o模型使用教程和简介 2024 年 5 月 13 日&#xff0c;openai 发布了最新的模型 GPT4o。 很多同学还不知道如何访问GPT-4、GPT-4 Turbo和GPT-4o等模型&#xff0c;这篇文章介绍如何在ChatGPT中访问GPT-4o&#xff0…

milvus索引

Milvus是一个开源的向量数据库引擎&#xff0c;旨在支持大规模向量相似度搜索和分析。索引在Milvus中扮演着非常重要的角色&#xff0c;它们用于加速向量数据的检索。下面详细介绍一下Milvus中的索引&#xff1a; 1. 索引类型 Milvus支持多种索引类型&#xff0c;每种类型都适…

无人机侦察:雷达系统概述

一、雷达基本原理 无人机侦察中的雷达系统主要基于无线电波的传播和反射原理。雷达发射机产生特定频率的电磁波&#xff0c;并通过天线以定向波束形式向空间发射。当这些电磁波遇到目标时&#xff0c;部分能量会被反射回来&#xff0c;被雷达接收机捕获。通过测量发射和接收电…

基于SpringBoot+Vue+Redis+Mybatis的商城购物系统 【系统实现+系统源码+答辩PPT】

前言 该系统采用SpringBootVue前后端分离开发&#xff0c;前端是一个单独的项目&#xff0c;后端是一个单独的项目。   技术栈&#xff1a;SpringBootVueMybatisRedisMysql   开发工具&#xff1a;IDEA、Vscode   浏览器&#xff1a;Chrome   开发环境&#xff1a;JDK1…

Pytorch 笔记

执行下面这段代码后&#xff0c;为什么返回的是 2 &#xff1f; vector torch.tensor([7, 7]) vector.shape为什么返回的是 torch.Size([2])&#xff1f; 当你创建一个PyTorch张量时&#xff0c;它会记住张量中元素的数量和每个维度的大小。在你的代码中&#xff0c;torch.t…

通过 js 调起微信官方的微信支付api

通过 js 调起微信官方的微信支付api function onBridgeReady() {WeixinJSBridge.invoke(getBrandWCPayRequest, { "appId": "wx2421b1c4370ec43b", // 公众号ID&#xff0c;由商户传入 "timeStamp": "1395712654", // 时间戳&quo…

动态插入HTML内容有哪些常见用法

动态插入HTML内容的常见用法包括但不限于以下几种情况&#xff1a; 用户交互反馈&#xff1a;当用户在网页上进行某些操作时&#xff08;如点击按钮、提交表单等&#xff09;&#xff0c;可以使用JavaScript动态插入HTML内容来提供即时的反馈或结果。例如&#xff0c;当用户点…

vue3第三十五节(TS 之 泛型)

本节介绍 ts 中泛型的常用情景 1 什么是泛型 泛型的本质是参数化类型&#xff0c;也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中&#xff0c;分别称为泛型类、泛型接口、泛型方法。 泛型使用<T>来定义类型&#xff0c;<T…

使用canarytokens进行入侵检测

canarytokens 基本概念 canarytokens是一种用于识别网络入侵的工具。它们是一种虚拟的“蜜罐”&#xff0c;可以在网络上放置&#xff0c;当有人尝试访问它们时&#xff0c;可以立即触发警报&#xff0c;以便及时发现潜在的安全威胁。这些token可以是各种形式&#xff0c;可以…

项目管理基础知识

项目管理基础知识 导航 文章目录 项目管理基础知识导航一、项目相关概念二、时间管理三、人员管理四、风险管理 一、项目相关概念 项目定义的三层意思 一定的资源约束:时间资源、经费资源、人力资源一定的目标一次性任务 里程碑 是项目中的重要时点或事件持续时间为零&…

深度神经网络——什么是迁移学习?

1.概述 在练习机器学习时&#xff0c;训练模型可能需要很长时间。从头开始创建模型架构、训练模型&#xff0c;然后调整模型需要大量的时间和精力。训练机器学习模型的一种更有效的方法是使用已经定义的架构&#xff0c;可能具有已经计算出的权重。这是背后的主要思想 迁移学习…

makefile一些特殊且常用的符号

$^&#xff1a;表示所有的依赖文件列表&#xff0c;多个文件以空格分隔。 $&#xff1a;表示目标文件的名称。 $<&#xff1a;表示第一个依赖文件的名称。 $*&#xff1a;表示目标文件的主文件名&#xff08;不包括扩展名&#xff09;。 $?&#xff1a;表示所有比目标文件更…

前端面试题日常练-day26 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. Vue中&#xff0c;以下哪个选项可以用于在组件之间传递数据&#xff1f; a) props b) emit c) model d) data 2. 在Vue中&#xff0c;以下哪个指令可以用于条件性地渲染一个元素&#xff1f; …

【Python设计模式10】外观模式

外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过提供一个统一的接口&#xff0c;来简化客户端与复杂系统之间的交互。外观模式为子系统中的一组接口提供一个高层接口&#xff0c;使得子系统更容易使用。 外观模式的结构 外观模式主要…

【学习心得】超简单的加载模型和保存模型的方法

方法一&#xff1a;pickle库 这是Python的标准序列化模块&#xff0c;可以将几乎任何Python对象转化为字节流&#xff08;即序列化&#xff09;&#xff0c;然后可以将其存储到文件中或通过网络发送。之后&#xff0c;可以使用pickle再次加载这个字节流&#xff0c;恢复原始对象…

Linux shell命令

cat 文件名 查看文件内容&#xff0c; tac文件名 倒着显示。 more 文件名 显示内容 less文件名 和more的功能一样&#xff0c;按上下左右键&#xff0c;按Q键结束。 head文件名&#xff0c;只显示前10行内容。 ln是一个默认创建硬链接的命令 ln 文件名 ls -i文件名…

全栈:Web 用户登录过程实例与Cookie管理

用户创建与使用cookie全过程 1.用户访问网站 当用户使用浏览器访问一个网站时&#xff0c;浏览器会向服务器发送一个HTTP请求。 2. 服务器响应请求 服务器接收到HTTP请求后&#xff0c;会处理请求并准备响应。如果服务器需要设置Cookie&#xff0c;它会在HTTP响应头中包含一…