react hook: useimperativeHandle
通过 useImperativeHandle,子组件可以选择性地暴露给父组件某些属性或方法,而不是将所有属性和方法暴露出去。
父组件 获得自组件的 ref,就能通过该 ref 来调用 focus来聚焦等功能
在 forwardRef 包装的组件中,ref 固定地是第二个参数,而第一个参数是这个组件接受的 props。这是 React 为了确保 forwardRef 正确工作而规定的。所以在这种情况下,ref 必须放在第二个参数的位置。
app.jsimport { useRef } from 'react';
import MyInput from './MyInput.js';export default function Form() {const ref = useRef(null);function handleClick() {ref.current.focus();// 下方代码不起作用,因为 DOM 节点并未被暴露出来:// ref.current.style.opacity = 0.5;}return (<form><MyInput placeholder="Enter your name" ref={ref} /><button type="button" onClick={handleClick}>Edit</button></form>);
}myInput.jsimport { forwardRef, useRef, useImperativeHandle } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {const inputRef = useRef(null);useImperativeHandle(ref, () => {return {focus() {inputRef.current.focus();},scrollIntoView() {inputRef.current.scrollIntoView();},};}, []);return <input {...props} ref={inputRef} />;
});export default MyInput;
不要滥用 ref。 你应当仅在你没法通过 prop 来表达 命令式 行为的时候才使用 ref:例如,滚动到指定节点、聚焦某个节点、触发一次动画,以及选择文本等等。
如果可以通过 prop 实现,那就不应该使用 ref。例如,你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。副作用 可以帮你通过 prop 来暴露一些命令式的行为。
相关文章:
react hook: useimperativeHandle
通过 useImperativeHandle,子组件可以选择性地暴露给父组件某些属性或方法,而不是将所有属性和方法暴露出去。 父组件 获得自组件的 ref,就能通过该 ref 来调用 focus来聚焦等功能 在 forwardRef 包装的组件中,ref 固定地是第二个…...
30天自制操作系统(第28天)
28.1 alloca __alloca 会在下述情况下被 C 语言的程序调用(采用 near-CALL 的方式)。 1、要执行的操作从栈中分配 EAX 个字节的内存空间( ESP - EAX; ) 2、要遵守的规则不能改变 ECX 、 EDX 、 EBX 、 EBP 、 ESI 、 EDI的值&am…...
Nginx启动服务
Nginx启动服务 一、启动前置 下载地址 如已安装Docker,下一步拉取Nginx最新的Docker镜像: docker pull nginx:latest查看拉取下来的镜像: docker images二、启动服务 创建Docker容器: docker run --name {projectname} -p 80…...
coqui-ai/TTS 案例model文件
GitHub - coqui-ai/TTS: 🐸💬 - a deep learning toolkit for Text-to-Speech, battle-tested in research and production Coqui AI的TTS是一款开源深度学习文本转语音工具,以高质量、多语言合成著称。它提供超过1100种语言的预训练模型库&…...
如何利用API接口进行高效的商品变体管理?
要利用API接口进行高效的商品变体管理,您需要执行一系列策略和技术步骤来确保数据的准确性和实时性。以下是详细的指南: 1. 确定变体管理需求 分析产品:识别具有变体的产品,并明确这些变体的属性(如尺寸、颜色、材质…...
扼杀网络中的环路:STP、RSTP、MSTP
目录 前言: 一、STP(Spanning Tree Protocol) 1.1 STP功能 1.2 STP应用 二、RSTP(Rapid Spanning Tree Protocol) 2.1 RSTP功能 2.2 RSTP应用 三、MSTP(Multiple Spanning Tree Protocol࿰…...
青少年如何从零开始学习Python编程?有它就够了!
文章目录 写在前面青少年为什么要学习编程 推荐图书图书特色内容简介 推荐理由粉丝福利写在最后 写在前面 本期博主给大家带来一本非常适合青少年学习编程的图书,快来看看吧~ 青少年为什么要学习编程 青少年学习编程,就好比在他们年轻时就开始掌握一种…...
触发HTTP preflight预检及跨域的处理方法
最近在做需求的过程中,遇到了很多跨域和HTTP预检的问题。下面对我所遇到过的HTTP preflight和跨域的相关问题进行总结: 哪些情况会触发HTTP preflight preflight属于cors规范的一部分,在有跨域的时候,在一定情况下会触发preflig…...
【算法可视化】搜索算法专题
运行平台 Algorithm Visualizer 选数 [NOIP2002 普及组] 选数 // 导入可视化库 { const { Tracer, Array1DTracer, LogTracer, Layout, VerticalLayout } require(algorithm-visualizer); // }const N 4, K 3; //从包含4个元素的集合中选出3个数 let ans 0 //方案数 co…...
编写dockerfile挂载卷、数据容器卷
编写dockerfile挂载卷 编写dockerfile文件 [rootwq docker-test-volume]# vim dockerfile1 [rootwq docker-test-volume]# cat dockerfile1 FROM centosVOLUME ["volume01","volume02"]CMD echo "------end------" CMD /bin/bash [rootwq dock…...
理解OAuth 2.0
OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版。 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为RFC 6749。 一、应用场景 为了…...
8. Go实现Gin服务优雅关机与重启
文章目录 优雅关机优雅重启 无论是优雅关机还是优雅重启归根结底都是通过监听特定系统信号,然后执行一定的逻辑处理保障当前系统正在处理的请求被正常处理后再关闭当前进程。 优雅关机 优雅关机就是服务端关机命令发出后不是立即关机,而是等待当前还在…...
SQL 注入攻击 - cookie base64编码注入
环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、Base64编码介绍 原理 Base64编码的原理是将三个字节的二进制数据(共24位)转换成四个ASCII字符。由于每个ASCII字符可以表示64种状态(2^6),刚好可以用来表示24位二进制数…...
Outlook邮箱后缀如何修改?怎么添加后缀?
Outlook邮箱后缀是什么?Outlook邮箱后缀可以改吗? Outlook邮箱广泛应用于企业和个人用户之间。在使用过程中,有时我们可能会因为某些原因需要修改Outlook邮箱后缀。那么,Outlook邮箱后缀如何修改呢?下面,A…...
[LeetBook]【学习日记】图书整理 II——用两个栈实现队列
题目 图书整理 II 读者来到图书馆排队借还书,图书管理员使用两个书车来完成整理借还书的任务。书车中的书从下往上叠加存放,图书管理员每次只能拿取书车顶部的书。排队的读者会有两种操作: push(bookID):把借阅的书籍还到图书馆。…...
5G智能制造食品工厂数字孪生可视化平台,推进食品行业数字化转型
5G智能制造食品工厂数字孪生可视化平台,推进食品行业数字化转型。随着科技的飞速发展,食品工业正迎来一场前所未有的数字化转型。在这场转型中,5G智能制造工厂数字孪生可视化平台发挥着至关重要的作用。它不仅提高了生产效率,降低…...
一个系列很多样式的wordpress外贸建站模板
菌菇干货wordpress跨境电商模板 食用菌、羊肚菌、牛肝菌、香菇、干黄花菜、梅干菜、松茸wordpress跨境电商模板。 https://www.jianzhanpress.com/?p3946 餐饮调味wordpress跨境电商模板 豆制品、蛋黄糖、烘焙、咖啡、调料、调味酱、餐饮调味wordpress跨境电商模板。 http…...
Wireshark_labs TCP
在本实验中,我们将详细研究著名的TCP协议的行为。我们将通过从您的电脑向远程服务器传输一份150KB 的文件(一份Lewis Carrol 的“爱丽丝梦游仙境”文本), 并分析TCP传输内容的发送和接收过程来实现。我们将研究TCP对序列和确认号的使用,以提供…...
Linux程序崩溃调试
一、简单点的 编译时主动带-g,生成的程序带调试信息,而且开启生成dump文件,这时候可以使用core dump来调试程序,定位问题。可以参考:linux 程序crash 调试、原因分析及问题定位-CSDN博客 二、稍微复杂点 假设生成的可执…...
Day37 socket、TCP、UDP
socket类型 流式套接字(SOCK_STREAM) TCP 提供了一个面向连接、可靠的数据传输服务,数据无差错、无重复的发送且按发送顺序接收。内设置流量控制,避免数据流淹没慢的接收方。数据被看作是字节流,无长度限制。 数据报套接字(SOCK_DGRAM) UD…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
