React.useState 的 ref 引用方法

news/2024/7/19 14:58:57 标签: react, js, useState

今天发现了一个,在 无状态函数式组件 中很精妙的 ref 引用方法
其中用到了 React.useState

const useState = React.useState

// 结合 useState 的用法
const Name1 = () => {
	const [refName, setRefName] = useState(null);
	const click1 = str => {
		console.log(refName)
	}
	return (
		<>
			<div ref={setRefName}>
				目标节点
			</div>
			<div onClick={click1}>click1</div>
		</>
	);
};
const Name2 = () => {
	let refName;
	const click1 = str => {
		console.log(refName)
	}
	return (
		<>
			<div ref={i => refName = i}>
				目标节点
			</div>
			<div onClick={click1}>click1</div>
		</>
	);
};

我的理解:
setRefName(value) 是修改 refName 的方法, 作用就是 refName = value
在 ref 中使用, 相当于 setRefName(this), 也就是 refName = this


注:useState 的一般用

const [swq, setSwq] = useState('初始值');
console.log(swq)	// 调用
setSwq("new swq")	// 赋新值

// 赋值要在下一个周期才生效

end


http://www.niftyadmin.cn/n/913735.html

相关文章

浅谈.NET中的数据绑定表达式(一)

今天谈下.NET中的数据绑定表达式。 数据绑定表达式必须包含在<%#和%>字符之间。格式如下: <tagprefix:tagname property<%# data-binding expression %> runat"server" />或者如下&#xff1a;此时只需要把属性DataSource<%# 数组名%> 。4&a…

java解决共享资源竞争

由于多线程的实现&#xff0c;在运行一个程序的时候可能会有很多的线程在同时运行&#xff0c;但是线程的调度并不是可见的&#xff0c;所以不会知道一个线程什么时候在运行&#xff0c;比如说 你坐在桌子前手拿着叉子&#xff0c;正要去叉盘中的最后一片食物&#xff0c;当你的…

Spring Security OAuth2.0笔记

请求命中filter: spring-security-oauth2-client:5.3.5.RELEASE org.springframework.security.oauth2.client.web.OAuth2AuthorizationRequestRedirectFilter Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterCha…

月英爱耀承(帮别人名字作诗)

月英爱耀承&#xff08;帮别人名字作诗&#xff09; ——代腾飞 2008年4月14日 于成都 月色皎皎爱如霜 英光脉脉两凝望 耀燿一生相扶过 承旨幸福万年长 转载于:https://www.cnblogs.com/daitengfei/archive/2008/04/15/1154313.html

console 中%s,%d,%f,%i,%o的应用

%s 字符类型(String)%d, %i 整型(Integer)%f 浮点类型(Floating)%O 对象类型(Object) %? 可以在 console.log() 中控制插入的位置和数据类型 demo console.log("1 %s 3", "") //1 3 console.log("1 %d 3", "") //1 NaN 3 console…

Kettle入门操作——sqlserver数据源配置

1、Sql Server的 数据库链接 Sql server链接有两类&#xff0c;MS SQL SERVER 和 MS SQL SERVER(NATIVE)&#xff0c;这两个有什么区别呢&#xff0c;且看下面。 第一类&#xff0c;MS SQL SERVER 链接&#xff0c;填写好信息后&#xff0c;进行测试&#xff0c;报错。 接下来&…

JavaWeb学习-1

一&#xff0c;Java Web项目需要掌握的技术 java语言 -| JDBC -| Servlet -| JSP -| JavaBean 面向对象分析设计思想 设计模式和框架结构 XML语言 网页脚本语言 开发工具 -|数据库 -|应用服务器 -|集成开发环境&#xff08;IDE&#xff09; 二.源代码&#xff1a; 1 packag…

关于特殊字符可能用到的方法总结

代码就是demo, 所以不啰嗦直接上代码 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><meta charset"utf-8"><meta name"viewport" content"…