在react中,使用ref获子取组件实例

在 React 中,你可以使用 ref 来获取子组件的实例。以下是一些使用 ref 获取子组件实例的常见方法:

使用createRef 函数

import React, { createRef } from 'react';export default class ParentComponent extends React.Component {childRef = createRef()componentDidMount () {// 子组件实例console.log(this.childRef.current,'类组件Ref')this.childRef.current.addPerson()}render () {return <ChildComponent ref={this.childRef} />}
}class ChildComponent extends React.Component {state = {personList: ['张三', '李四']}addPerson () {console.log('添加一个人')}render () {return <div>Hello World</div>}
}

请注意,如果子组件是函数式组件,则需要使用 forwardRef 来包装子组件,以便能够正确地传递 ref。 

 在 React 中,如果子组件是函数式组件,你可以使用 forwardRef 来包装子组件,以便能够正确地传递 ref。以下是一个示例:

import React, { forwardRef, useImperativeHandle } from 'react'const ChildComponent = forwardRef((props, ref) => {const [count,setCount] = React.useState(0)// 暴露给父组件的属性---ref是必须项useImperativeHandle(ref, () => ({count,addCount}))const addCount = () => {setCount(count => count + 1)}return (<div><button onClick={addCount}>改变值</button><h1>函数子组件----{count}</h1></div>)
})export default class ParentComponent extends React.Component {childRef = React.createRef()componentDidMount () {console.log(this.childRef, '函数子组件')this.childRef.current.addCount()}render () {return (<ChildComponent ref={this.childRef} />)}
}

在这个例子中,ChildComponent 是一个函数式组件,使用 forwardRef 包装后,我们可以访问传递给 ChildComponent 的 ref通过暴露(useImperativeHandle函数),在 ParentComponent 中就可以通过 this.childRef.current 访问子组件实例了。

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

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

相关文章

拂袖一挥,zipfile秒列zip包内容

使用wxpython列出文件夹中的zip文件及内容 最近在做一个文件管理的小工具,需要列出选择的文件夹下的所有zip压缩文件,并在点击某个zip文件时能够显示其中的内容。为此我使用了wxpython来实现这个功能。 1. 导入需要的模块 首先导入程序需要的模块: import wx import os imp…

HTML - Javascript - 原生的JS HTTP请求:实用主义的一篇文章

HTML - Javascript - 原生的JS HTTP请求&#xff1a;实用主义的一篇文章 前言 虽然现在使用JQuery等可以做到很方便的HTTP请求&#xff0c;但是这样做毕竟要引入一些JS文件。 如果想使用原生的JS进行HTTP网络请求应该怎样呢&#xff1f;可以使用XMLHttpRequest。 使用方法 …

设计模式之工厂模式

简单工厂 由一个工厂生产多个产品。 一般工厂 每个产品都有一个单独的工厂专门生产。 抽象工厂 不同工厂生产不同种类的产品&#xff0c;每个工厂生产的同类产品又可以再次分类。比如一个鼠标工厂和一个键盘工厂&#xff0c;他们可以为不同的品牌生产鼠标和键盘。

CTF流量题解http1.pcapng

使用Wireshark工具打开流量文件http1.pcapng&#xff0c;如下图所示。 在过滤检索栏输入http&#xff0c;wireshark自动进行过滤。 选中其中一条记录后&#xff0c;wireshark 下方显示若干信息。 Frame 81: 925 bytes on wire (7400 bits), 925 bytes captured (7400 bits) …

从数据仓库到数据结构:数据架构的演变之路

在上个世纪&#xff0c;从电子商务巨头到医疗服务机构和政府部门&#xff0c;数据已成为每家组织的生命线。有效地收集和管理这些数据可以为组织提供宝贵的洞察力&#xff0c;以帮助决策&#xff0c;然而这是一项艰巨的任务。 尽管数据很重要&#xff0c;但CIOinsight声称&…

Unity项目中查找所有使用某一张图片的材质球,再查找所有使用材质球的预设

废话少说&#xff0c;直接上代码。 using UnityEditor; using UnityEngine;public class FindDependencies : MonoBehaviour {static bool m_bIsSaveFile false;static TextWriteHelper m_szMaterialList new TextWriteHelper();static TextWriteHelper m_szPrefabList new…

DL_20无线串口模块

今日介绍一块最近入手的无线串口模块&#xff0c;40r左右&#xff0c;精简好用&#xff0c;虽然感觉配置波特率啥的并不智能化&#xff0c;但250米的通信距离还是很顶的&#xff01;它的升级版甚至有1000米的通信距离&#xff08;空旷地带&#xff09; 这篇文章不多讲其余话&am…

【C++】开源:abseil-cpp基础组件库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍abseil-cpp基础组件库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#…

什么,你说你不会通过jdbc一次性创建10个数据库???

小朋友你是否有很多问号&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 1、在资源文件中建一个文件&#xff0c;填入连接数据库的基本信息。 2、通过反射拿到资源文件。…

数据库新闻速递 -- POSTGRESQL 正在蚕食数据库市场 (翻译)

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请加 liuaustin3微信号 &#xff0c;在新加的朋友会分到3群&#xff…

机器学习笔记 - 使用 YOLOv5、O​​penCV、Python 和 C++ 检测物体

一、YOLO v5简述 YOLO v5虽然已经不是最先进的对象检测器,但是YOLOv5 使用了一个简单的卷积神经网络 CNN架构(相对YOLO v8来讲,不过v8精度是更高了一些),更易理解。这里主要介绍如何轻松使用 YOLO v5来识别图像中的对象。将使用 OpenCV、Python 和 C++ 来加载和调用我们的…

K8S系列文章之 一键部署K8S环境

部署的原理是基于自动化部署工具 Ansible 实现的&#xff0c;需要提前安装Ansible 并配置下主机节点环境 1. 安装 Ansible 首先ansible基于python2.X 环境&#xff0c;默认centos都已经安装好了python2环境 // 最好更新下库 // yum update yum install -y epel-release yum i…

flask使用cookie (设置cookie与查看cookie内容)

1.flask包cookie的使用 设置cookie app.route(/set_cookie) def set_cookie():resp make_response(Setting cookie)resp.set_cookie(username, John)return resp查看cookie: app.route(/get_cookie) def get_cookie():username request.cookies.get(username)return Welco…

背上沉重的书包准备run之react篇

沉重&#xff0c;太沉重了。。。没理好捏&#xff0c;等我脑子歇歇再好好补充一下 react特性&#xff1f; React 是一个用于构建用户界面的 JavaScript 库&#xff0c;它具有以下特性&#xff1a; 组件化开发&#xff1a;React 基于组件化思想&#xff0c;将 UI 拆分为独立、…

Spring系列四:AOP切面编程

文章目录 &#x1f497;AOP-官方文档&#x1f35d;AOP 讲解&#x1f35d;AOP APIs &#x1f497;动态代理&#x1f35d;初始动态代理&#x1f35d;动态代理深入&#x1f35d;AOP问题提出&#x1f4d7;使用土方法解决&#x1f4d7; 对土方法解耦-开发最简单的AOP类&#x1f4d7;…

MongoDB文档-进阶使用-spring-boot整合使用MongoDB---MongoRepository完成增删改查

阿丹&#xff1a; 之前学习了在MongoDB客户端上的MongoDB语句现在将MongoDB整合到spring项目。 传送门&#xff1a; MongoDB文档--基本概念_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装&#xff08;mongodb环境搭建&#xff09;-docker安装&#xff08;挂载数据卷…

『CV学习笔记』docker和nvidia-docker离线安装

docker和nvidia-docker离线安装 文章目录 1. docker的deb包下载链接2. nvidia-docker 的deb包下载3. 重启 docker4. 检验安装5. Docker容器命令行不支持Tab键命令自动补全6. 参考文献这里是ubuntu操作系统, 如果是其他的操作系统,则需要安装对应的deb包1. docker的deb包下载链…

木马免杀(篇二)shellcode 学习

木马免杀&#xff08;篇二&#xff09;shellcode 学习 —— shellcode介绍 shellcode 是一段利用软件漏洞进行执行的机器码&#xff0c; 通常用汇编语言编写并被翻译为十六进制操作码&#xff0c;因常被攻击者用于获取系统的命令终端shell 接口&#xff0c;所以被称为 shellc…

并发编程面试题2

并发编程面试题2 一、AQS高频问题&#xff1a; 1.1 AQS是什么&#xff1f; AQS就是一个抽象队列同步器&#xff0c;abstract queued sychronizer&#xff0c;本质就是一个抽象类。 AQS中有一个核心属性state&#xff0c;其次还有一个双向链表以及一个单项链表。 首先state…

openEuler加载本地yum源

挂载iso文件到mnt mount /data/download/openEuler-22.03-LTS-x86_64-dvd.iso /mnt/修改/etc/yum.repos.d/openEuler.repo [Local] namelocal baseurlfile:///mnt enabled1 gpgcheck1 gpgkeyfile:///etc/pki/rpm-gpg/RPM-GPG-KEY-openEuler3.更新yum源信息 yum clean all yu…