forwardRef - React父组件控制子组件

作用:forwardRef 用于拿到父组件传入的 ref 属性,这样在父组件便能通过 ref 控制子组件。

父组件:

 import { useRef } from "react";import About from "./comment/About"; //引入子组件function App() {const typeRef = useRef(); ​const bool = false;//定义一个参数const toggle = () => {console.log(typeRef)//调用 typeRef.current里面的数据typeRef.current.show();typeRef.current.close();console.log(typeRef.current.a);};// 回调函数const select = (item) => {console.log( item, "typeRef");};return (<><About ref={typeRef} onSelect={select} parameter={bool}></About><button onClick={toggle}>点击</button></>);}​export default App;
  • 父组件可以通过props向子组件传递参数,和方法。
  •  父组件通过 typeRef.current,调用在子组件中的方法和属性

子组件:

import React, { forwardRef } from "react";​/**forwardRef渲染函数只接受两个参数:props和ref,必须要传这两个参数*/const About = forwardRef((props, ref) => {//向ref.current添加属性,在父组件中调用ref.current = {show: () => {console.log("show");},close: () => {console.log("close");},a:false,};const choseType = () => {console.log(props);//调用props里的方法和参数props.onSelect(1);console.log(props.parameter);};return <div onClick={choseType}>About</div>;});​export default About;​

        子组件通过props接收父组件的方法和参数,进行调用

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

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

相关文章

飞天使-linux操作的一些技巧与知识点5-expect与docker便捷命令

expect 主要使用场景不输入账户密码的多 yum install -y expect 则可以安装上 #!/usr/bin/expect -f set username “root” set password “123456” spawn /bin/bash send “cd /data/container/\r” expect "$ " # 等待命令提示符 send “git pull\r” expect…

openEuler如何指定镜像源或更换镜像源

前言 因为openGauss数据库当前仅仅支持以下操作系统&#xff0c;而且本人用的时arm架构&#xff0c;所以只能在openEuler中安装 又因为硬件的原因只能用某个国产操作系统&#xff08;由此可见国产统一可太难了&#xff09;&#xff0c;想着通过用docker镜像去安装 openEuler&am…

MYSQL库和表的操作(修改字符集和校验规则,备份和恢复数据库及库和表的增删改查)

文章目录 一、MSYQL库的操作1.连接MYSQL2.查看当前数据库3.创建数据库4.字符集和校验规则5.修改数据库6.删除数据库7.备份和恢复8.查看连接 二、表的操作1.创建表2.查看表结构3.修改表4.删除表 一、MSYQL库的操作 1.连接MYSQL 我们使用下面的语句来连接MSYQL&#xff1a; my…

关于session每次请求都会改变的问题

这几天在部署一个前后端分离的项目&#xff0c;使用docker进行部署&#xff0c;在本地测试没有一点问题没有&#xff0c;前脚刚把后端部署到服务器&#xff0c;后脚测试就出现了问题&#xff01;查看控制台报错提示跨域错误&#xff1f;但是对于静态资源请求&#xff0c;包括登…

uni-app h5对接 thinkphp5接口跨域

uni-app h5对接 thinkphp5接口跨域 问题描述 请求接口 提示 Access to XMLHttpRequest at http://******* from origin http://localhost:8091 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: It does not have HTTP o…

【CSS】字体效果展示

测试时使用了Google浏览器。 1.Courier New 2.monospace 3.Franklin Gothic Medium 4.Arial Narrow 5.Arial 6.sans-serif 7.Gill Sans MT 8.Calibri 9.Trebuchet MS 10.Lucida Sans 11.Lucida Grande 12.Lucida Sans Unicode 13.Geneva 14.Verdana 15.Segoe UI 16.Tahoma 17.…

【2024华数杯国际数学建模竞赛】问题B 光伏发电 完整代码+结果分析+论文框架(二)

问题B&#xff08;二&#xff09; 5.2 问题二模型的建立与求解&#xff08;二&#xff09;5.1.4基于LSTM的时间序列预测模型5.1.5 LSTM的时间序列预测结果5.1.6 多元回归模型的预测结果5.1.7 LSTM时间序列模型的性能评价 5.2 问题二模型的建立与求解5.2.1基于皮尔逊系数相关性分…

第十四届蓝桥杯省赛pythonB组题。 管道

5407. 管道 - AcWing题库 ​​​ 有一根长度为 len的横向的管道&#xff0c;该管道按照单位长度分为 len 段&#xff0c;每一段的中央有一个可开关的阀门和一个检测水流的传感器。 一开始管道是空的&#xff0c;位于 Li 的阀门会在 Si 时刻打开&#xff0c;并不断让水流入管道。…

【C++中STL】set/multiset容器

set/multiset容器 Set基本概念set构造和赋值set的大小和交换set的插入和删除set查找和统计 set和multiset的区别pair对组两种创建方式 set容器排序 Set基本概念 所有元素都会在插入时自动被排序。 set/multist容器属于关联式容器&#xff0c;底层结构属于二叉树。 set不允许容…

go windows环境下编译成 linux可执行文件

cmd执行以下命令&#xff1a; set GOARCHamd64 go env -w GOARCHamd64 set GOOSlinux go env -w GOOSlinux然后go build [文件名]&#xff0c;编译好的程序放到linux环境下 chmod 777 [文件名] 给权限&#xff0c;执行即可 再切换回windows go env -w GOARCHamd64 go env -…

设计高并发分布式锁架构的实用指南

在面对Java超大并发需求时&#xff0c;设计一个高效的分布式锁架构是至关重要的。本文将为您提供一套清晰明了、实践方便的设计指南&#xff0c;以确保系统在高并发场景下能够稳定可靠地运行。 1. 需求分析 首先&#xff0c;了解业务需求对分布式锁的具体要求至关重要。考虑到…

代码随想录算法训练营第16天| Leetcode 110.平衡二叉树、257.二叉树的所有路径、404.左叶子之和

目录 Leetcode 110.平衡二叉树 Leetcode 257.二叉树的所有路径 Leetcode 404.左叶子之和 Leetcode 110.平衡二叉树 题目链接&#xff1a;Leetcode 110.平衡二叉树 题目描述&#xff1a;给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。本题中&#xff0c;一棵高度平…

架构师的36项修炼-08系统的安全架构设计

本课时讲解系统的安全架构。 本节课主要讲 Web 的攻击与防护、信息的加解密与反垃圾。其中 Web 攻击方式包括 XSS 跨站点脚本攻击、SQL 注入攻击和 CSRF 跨站点请求伪造攻击&#xff1b;防护手段主要有消毒过滤、SQL 参数绑定、验证码和防火墙&#xff1b;加密手段&#xff0c…

java关键字概述——final及常量概述

前言&#xff1a; 打好基础&#xff0c;daydayup! final final概述 final关键字是最终的意思&#xff0c;可以修饰&#xff08;类&#xff0c;方法&#xff0c;变量&#xff09; final作用 修饰类&#xff1a;该类被称为最终类&#xff0c;特点为不能被继承 修饰方法&#xff…

智能GPT图书管理系统(SpringBoot2+Vue2)、接入GPT接口,支持AI智能图书馆

☀️技术栈介绍 ☃️前端主要技术栈 技术作用版本Vue提供前端交互2.6.14Vue-Router路由式编程导航3.5.1Element-UI模块组件库&#xff0c;绘制界面2.4.5Axios发送ajax请求给后端请求数据1.2.1core-js兼容性更强&#xff0c;浏览器适配3.8.3swiper轮播图插件&#xff08;快速实…

【笔试常见编程题01】删除公共字符串、组队竞赛、倒置字符串、排序子序列

1. 删除公共字符串 输入两个字符串&#xff0c;从第一字符串中删除第二个字符串中所有的字符。 例如&#xff0c;输入”They are students.”和”aeiou”&#xff0c;则删除之后的第一个字符串变成”Thy r stdnts.” 输入描述 每个测试输入包含2个字符串 输出描述 输出删除后的…

外包干了8个月,技术退步明显...

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

v43-47.problems

1.for循环 一般地&#xff0c;三步走&#xff1a; for&#xff08;初始化&#xff1b;表达式判断&#xff1b;递增/递减&#xff09; &#xff5b; ....... &#xff5d; 但是&#xff0c;如果说声明了全局变量&#xff0c;那么第一步初始化阶段可以省略但是要写分号‘ ; ’…

Java后端开发:学籍系统核心逻辑

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

uniapp组件库fullScreen 压窗屏的适用方法

目录 #平台差异说明 #基本使用 #触发压窗屏 #定义压窗屏内容 #注意事项 所谓压窗屏&#xff0c;是指遮罩能盖住原生导航栏和底部tabbar栏的弹窗&#xff0c;一般用于在APP端弹出升级应用弹框&#xff0c;或者其他需要增强型弹窗的场景。 警告 由于uni-app的Bug&#xff0…