重温react-10(函数组件和类组件的ref获取方式)

App.js的代码

06是函数组件

07是类组件

import React, { useEffect, useRef } from 'react';
import LearnFunction06 from './LearnFunction06'; //  函数组件和类组件的ref使用方式
import LearnFunction07 from './LearnFunction07'; //  函数组件和类组件的ref使用方式
export default function BoxReact() {const learnRef = useRef(null)const classRef = useRef(null)useEffect(() => {console.log(learnRef.current);console.log(classRef.current);}, [])return (<div><LearnFunction06 ref={learnRef}></LearnFunction06><LearnFunction07 ref={classRef}></LearnFunction07></div>)
}

06的代码

import React, { forwardRef } from 'react'export default forwardRef(function LearnFunction06(props, ref) {return (<div ref={ref}> LearnFunction06</div>)
})

正常函数组件是没有ref的,需要通过forwardRef来修饰组件才能产生ref

07的代码

import React, { Component } from 'react'export default class LearnFunction07 extends Component {render() {return (<div>LearnFunction07</div>)}
}

效果图

这样都可以拿到ref啦

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

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

相关文章

dell服务器RAID5磁盘阵列出现故障的解决过程二——热备盘制作与坏盘替换过程

目录 背景方案概念全局热备&#xff08;Global Hot Spare&#xff09;&#xff1a;独立热备&#xff08;Dedicated Hot Spare&#xff09;&#xff1a; 过程8号制作成热备清除配置制作独立热备热备顶替坏盘直接rebuild 更换2号盘2号热备 注意注意事项foreign状态要先清除配置 背…

【Mac】Boxy SVG for Mac(矢量图编辑器)及同类型软件介绍

软件介绍 Boxy SVG 是一款功能强大的矢量图形编辑器&#xff0c;专门为 macOS 平台设计开发。它主要用于创建和编辑 SVG&#xff08;可缩放矢量图形&#xff09;文件&#xff0c;是设计师和开发者们制作矢量图形的理想工具。 以下是关于 Boxy SVG 的主要特点和功能&#xff1a…

Rural Access Index (RAI)农村通达指数

农村通达指数&#xff08;RAI&#xff09; 简介 农村通达指数&#xff08;RAI&#xff09;是全球交通领域最重要的发展指标之一。它是目前可持续发展目标中唯一一个直接衡量农村通达性的指标&#xff0c;通过评估农村人口的四季道路通达性来实现。在 2015 年作为可持续发展目…

路由LLM:优化模型调用的成本与效率

引言 在最近的一些视频和讨论中&#xff0c;我们经常提到使用较便宜和较快的模型来替代一些昂贵的大型语言模型&#xff08;LLM&#xff09;。这种方法的一个主要原因是看到许多人在不必要的场合调用如GPT-4或Claude Opus等高级模型&#xff0c;从而浪费了大量资金。而事实上&…

IDEA 编译单个Java文件

文章目录 一、class文件的生成位置二、编译单个文件编译项目报错Error:java: 无效的源发行版: 8 一、class文件的生成位置 file->project structure->Modules 二、编译单个文件 选中文件&#xff0c;点击recompile 编译项目报错 Error:java: 无效的源发行版: 8 Fi…

2024最新PyCharm安装教程(附激活码)

今天讲解的是PyCharm安装教程 一、软件简介 PyCharm是一款Python IDE&#xff0c;其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具&#xff0c;比如&#xff0c; 调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制等等。此外…

字符串和正则表达式踩坑

// 中石化加油卡号格式&#xff1a;以 100011 开头共19位public static final String ZHONGSHIYOU_OIL_CARD_PATTERN "^100011\\d{13}$";// 中石油加油卡号格式&#xff1a;以90、95、70开头共16位public static final String ZHONGYOU_OIL_CARD_PATTERN "^(9…

使用 urllib OpenSSL 时遇到的问题及解决

题意&#xff1a; ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ssl module is compiled with LibreSSL 2.8.3 当前使用的 urllib3 版本&#xff08;v2.0&#xff09;仅支持 OpenSSL 1.1.1 或更高版本&#xff0c;但你的 Python 环境中的 ssl 模块…

安装opencv-python出错,怎么办?

安装opencv-python出错 解决方法&#xff1a; 具体版本号&#xff0c;python3.6对应的就是4.3.0.38 pip install opencv-python4.3.0.38 -i https://pypi.tuna.tsinghua.edu.cn/simple

《梦醒蝶飞:释放Excel函数与公式的力量》8.5 COUNTIFS函数

8.5 COUNTIFS函数 COUNTIFS函数是Excel中的一种多条件计数函数&#xff0c;用于统计同时满足多个条件的单元格数量。它是COUNTIF函数的增强版&#xff0c;允许在一个函数中使用多个条件。 8.5.1 函数简介 COUNTIFS函数用于统计符合多个条件的单元格数量。它在数据分析中非常…

Sentinel链路流控模式失效的解决方法

解决方法 1、在pom.xml中增加sentinel-web-servlet的依赖&#xff0c;我使用的版本是1.7.1 <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-web-servlet</artifactId> </dependency>2、在项目中添加一个FilterCon…

uniapp应用如何实现传感器数据采集和分析

UniApp是一种跨平台的应用开发框架&#xff0c;它支持在同一份代码中同时开发iOS、Android、H5等多个平台的应用。在UniApp中实现传感器数据采集和分析的过程可以分为以下几个步骤&#xff1a; 引入相关插件或库 UniApp通过插件或库的形式扩展功能。对于传感器数据采集和分析&…

MySQL 9.0 GA 来了!

2024 年 7 月 2 日&#xff0c;MySQL 9.0 GA 版本正式发布。还记得 MySQL 8.0 版本正式发布于 2018 年 4 月 19 日&#xff0c;中间经过了 6 年之久&#xff0c;MySQL 官方终于发布了大版本号变更得 9.0 版本&#xff0c;接下来由我给大家介绍 MySQL 在 9.0 版本中有哪些新的变…

C++学习笔记---POCO库

在Windows系统中安装POCO 1&#xff09;安装OpenSSL POCO编译安装依赖OpenSSL&#xff0c;如果未安装OpenSSL则应该先安装OpenSSL。 假设将OpenSSL安装在C:\OpenSSL-Win64&#xff0c;将C:\OpenSSL-Win64、C:\OpenSSL-Win64\lib添加到PATH环境变量中2&#xff09;安装POCO 将p…

C++11新特性【下】{lambda表达式、可变模板参数、包装器}

一、lambda表达式 在C98中&#xff0c;如果想要对一个数据集合中的元素进行排序&#xff0c;可以使用std::sort方法。如果待排序元素为自定义类型&#xff0c;需要用户定义排序时的比较规则&#xff0c;随着C语法的发展&#xff0c;人们开始觉得上面的写法太复杂了&#xff0c…

1-讯飞星火大模型API调用示例解析

1官网链接 比赛官网&#xff1a;2024 iFLYTEK A.I.开发者大赛-讯飞开放平台 (xfyun.cn)&#xff1b;控制台官网&#xff1a;控制台-讯飞开放平台 (xfyun.cn)&#xff1b; 2星火模型python调用示例 示例链接&#xff1a;https://xfyun-doc.xfyun.cn/lc-sp-PythonDemo-17163704…

了解MySQL【事务】的功能:确保数据完整性的关键技术

在数据库管理中&#xff0c;事务是确保数据完整性和一致性的核心机制。特别是对MySQL这样广泛应用的开源数据库系统&#xff0c;掌握事务的使用至关重要。在这篇文章中&#xff0c;我们将全面探讨MySQL事务的工作原理、ACID属性、隔离级别以及最佳实践&#xff0c;从而帮助开发…

宝塔Linux面板配置环境 + 创建站点

一、安装 &#xff08;1&#xff09;进入宝塔官网 https://www.bt.cn/new/index.html &#xff08;2&#xff09;点击“ 立即免费安装 ”&#xff0c;选择 Centos安装脚本 &#xff08;3&#xff09;进入 ssh 输入以下命令安装宝塔 yum install -y wget && wget -O …

实验三 SQL Server SSMS工具添加数据

1、打开ecommerce数据库&#xff0c;向表中分别录入以下数据信息 &#xff08;1&#xff09;商品类别表category catno catname describe 101 手机 各种品牌、型号手机 201 激光打印机 各种激光打印机 202 喷墨打印机 各种喷墨打印机 301 平板电脑 各种平板电脑…

思看科技募资额骤降:对赌压力下巨额分红,还购买 7项商业房产

《港湾商业观察》施子夫 6月11日&#xff0c;证监会网站披露思看科技&#xff08;杭州&#xff09;股份有限公司&#xff08;以下简称&#xff0c;思看科技&#xff09;的首轮审核问询函回复意见并更新2023年财务数据&#xff0c;继续推进上市进程。 公开信息显示&#xff0c…