React useRef 组件内及组件传参使用
保存变量, 改变不引起渲染
import { useRef} from 'react';
const dataRef = useRef(null)
...
dataRef.current = setTimeout(()=>console.log('...'),1000)
绑定dom
const inputRef = useRef(null)
<input ref = {inputRef} />
绑定dom列表 - ref 回调
const itemsRef = useRef({})
{catList.map(cat => (<likey={cat.id}ref={(node) => {const map = getMap();if (node) {itemsRef.current[cat.id] = node;} else {delete itemsRef.current[cat.id]}}}>{cat.id}</li>
))}
访问子组件属性
将 ref 放在自定义组件上,默认情况下会得到 null。因为默认情况下,React 不允许组件访问其他组件的 DOM 节点。手动操作另一个组件的 DOM 节点会使你的代码更加脆弱。
想要暴露其 DOM 节点的组件必须选择该行为。一个组件可以指定将它的 ref “转发”给一个子组件。
// 父组件
const inputRef = useRef(null);
<MyInput ref={inputRef} /> // 1. 告诉 React 将对应的 DOM 节点放入 inputRef.current 中。但是这取决于 MyInput 组件是否允许,默认不允许。// 子组件 MyInput
import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => { // 2. forwardRef 接受父组件的 inputRef 作为第二个参数 ref 传入组件,第一个参数是 props。return (<input {...props} ref={ref} /> // 3. 将 ref 传递给 <input>)
});
使用 useImperativeHandle 暴露 API
import { forwardRef, useRef, useImperativeHandle } from 'react';const MyInput = forwardRef((props, ref) => {const realInputRef = useRef(null);useImperativeHandle(ref, () => ({// 只暴露 focus,没有别的focus() {realInputRef.current.focus();},}));return <input {...props} ref={realInputRef} />;
});export default function Form() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><MyInput ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></>);
}
相关文章:
React useRef 组件内及组件传参使用
保存变量, 改变不引起渲染 import { useRef} from react; const dataRef useRef(null) ... dataRef.current setTimeout(()>console.log(...),1000)绑定dom const inputRef useRef(null) <input ref {inputRef} />绑定dom列表 - ref 回调 const ite…...
Intelij IDEA中Mapper.xml无法构建到资源目录的问题
问题场景: 在尝试把原本在eclipse上的Java Web项目转移至Intelij idea上时,在配置文件均与eclipse一致的情况下出现了如下报错: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.umbrella.crm_core.…...
2024.6.23周报
目录 摘要 ABSTRACT 一、文献阅读 一、题目 二、摘要 三、网络架构 四、创新点 五、文章解读 1、Introduction 2、Method 3、实验 4、结论 二、代码实验 总结 摘要 本周阅读了一篇题目为NAS-PINN: NEURAL ARCHITECTURE SEARCH-GUIDED PHYSICS-INFORMED NEURAL N…...
鸿蒙实战开发:网络层的艺术——优雅封装与搭建指南(中)
前言 在鸿蒙开发的广袤天地中,网络层的搭建与封装无疑是构建高效、稳定应用的基石。继上篇的探索之后,本文将继续深入网络层的优化之旅,揭秘如何通过类型转换器、请求查询附加器以及丰富的常量参数,将网络层的构建艺术推向一个新…...
docker in docker 连私有仓库时报错 https
背景 jenkins 是使用 docker 方式部署的, 在 jenkins中又配置了 docker 的命令, 使用的宿主机的 docker 环境, 在jenkins 中执行 docker 相关命令的时候报错 jenkinse0e7b943b6e4:/$ docker login -u admin -p Harbor12345 172.16.100.15:80 WARNING! Using --password via t…...
mac怎么压缩pdf文件,苹果电脑怎么压缩pdf文件大小
在当今数字化时代,PDF文件已成为广泛使用的文档格式之一。然而,PDF 文件可能会因其包含的图像、图形和其他元素而导致文件较大,这可能会影响文件的传输、存储和共享。因此,对 PDF 文件进行压缩以减小其文件大小是很有必要的。今天…...
兴顺物流管理系统的设计
管理员账户功能包括:系统首页,个人中心,管理员管理,驾驶员管理,物流资讯管理,车辆管理,基础数据管理 员工账户功能包括:系统首页,个人中心,物流资讯管理&…...
力扣(2024.06.21)
1. 54——螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix ,请按照顺时针螺旋顺序 ,返回矩阵中的所有元素。 标签:数组,矩阵,模拟 代码: class Solution:def spiralOrder(self, matrix: List[List[int]]) -&…...
飞机大战java
"飞机大战"是一种经典的射击游戏,通常在各种平台上都有实现,包括Java。如果你想要开发一个Java版本的飞机大战游戏,你可能需要考虑以下几个方面: 游戏设计:确定游戏的基本规则,比如玩家控制的飞机…...
Springboot的自动配置原理
文章目录 Springboot的自动配置原理?1. Spring Boot Starter 依赖2.SpringBootApplication注解3.自动触发配置4.Auto-configuration Classes5.条件注解6. 外部配置文件7. 优先级和排除总结 Springboot的自动配置原理? 1. Spring Boot Starter 依赖 Spring Boot 提供了各种 …...
Interview preparation--elascitSearch深分页问题
深度分页出现原因 当我们需要查询的数据页数特别大的时候,比如from size 大于10000 的时候,可能出现“window is too large” 异常,如下网图: 查询语句如下 { "query": { "bool": { "must": [ {…...
C语言笔试题:实现把一个无符号整型数字的二进制序列反序后输出
目录 题目 实例 方法一:直接交换 方法二:间接交换 拓展 题目 编写一个函数,将一个无符号整数的所有位逆序(在32位机器下) 实例 例如有一个无符号整数 unsigned int num 32; unsigned int 在32位系统中占4个字…...
elementplus如何实现dialog遮罩层外的元素可以被操作点击
elementplus如何实现dialog遮罩层外的元素可以被操作点击 element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一,它的效果是弹出一个对话框,外面默认会有一个蒙层。 现在我碰到的需求是,弹窗要正常显示,但是蒙层下…...
Springboot整合Kafka消息队列服务实例
一、Kafka相关概念 1、关于Kafka的描述 Kafka是由Apache开源,具有分布式、分区的、多副本的、多订阅者,基于Zookeeper协调的分布式处理平台,由Scala和Java语言编写。通常用来搜集用户在应用服务中产生的动作日志数据,并高速的处…...
kotlin——MVVM框架下的大型项目优化
目录 概要 优化思路 一、重构过长的Activity 二、优化臃肿的ViewModel 示例代码: 概要 在大型项目中,随着项目越做越大,activity和viewmodel的代码会越来越多,尽量保持Activity和ViewModel的代码精简和易于维护是非常重要的。个人…...
echarts实现折线图点击添加标记
文章目录 背景一、代码示例 背景 业务场景体现在功能层面主要两点, 折线图表设置点击事件点击事件与图标渲染标记绑定 对于节点没有被添加标记的可以,弹框提示添加标记,并提供标记内容输入框,已经添加过标记的点,点…...
循环赛日程表
描述 n 2 ^ k个选手 每个选手必须与其他n-1个选手各赛一次每个选手一天赛一次比赛打n-1天 思路 k 3时的解 我们先进行假设:每个选手第一天和自己比,然后分解成4个子问题: (1)14号的第14天,对手1~4号; (2)14号的第58天&a…...
计算机网络:运输层 - 概述
计算机网络:运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层,他们共同解决了将主机通过网络互联起来所面临的问题,实现了主机到主机的通信。 网络层的作用范围是…...
使用阿里开源的Spring Cloud Alibaba AI开发第一个大模型应用
背景 前段时间看到Spring推出了SpringAI,可以方便快速的接入ChatGPT等国外的大模型,现在阿里巴巴也紧追脚步推出了Spring Cloud Alibaba AI,Spring Cloud Alibaba AI 目前基于 Spring AI 0.8.1 版本 API 完成通义系列大模型的接入。通义接入…...
`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性,比如颜色、大小和透明度。
demo案例 THREE.PointsMaterial 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性,比如颜色、大小和透明度。下面是对其构造函数的参数、属性和方法的详细讲解。 构造函数 const material new THREE.PointsMaterial(parameters);参数&am…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
