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…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
