React.useState 的 ref 引用方法

今天发现了一个,在 无状态函数式组件 中很精妙的 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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对不起,这是一个类型错误。在使用 `useRef 创建引用时,需要指定引用初始值的类型。对于 `containerRef` 引用,您可以将其类型声明为 `React.MutableRefObject<HTMLDivElement | null>`,表示它引用了一个 `HTMLDivElement` 元素或者是 `null`。以下是修改后的示例代码: ```jsx import React, { useState, useEffect, useRef } from 'react'; const YourComponent = () => { const [data, setData] = useState([]); const [page, setPage] = useState(1); const containerRef = useRef<HTMLDivElement | null>(null); const fetchNextPageData = async () => { const response = await fetch(`your-api-url?page=${page}`); const responseData = await response.json(); return responseData; }; const handleScroll = () => { if (containerRef.current) { const { scrollTop, scrollHeight, clientHeight } = containerRef.current; if (scrollTop + clientHeight === scrollHeight) { loadNextPage(); } } }; const loadNextPage = async () => { try { const nextPageData = await fetchNextPageData(); setData((prevData) => [...prevData, ...nextPageData]); setPage((prevPage) => prevPage + 1); } catch (error) { console.error('Error fetching data:', error); } }; useEffect(() => { if (containerRef.current) { containerRef.current.addEventListener('scroll', handleScroll); } return () => { if (containerRef.current) { containerRef.current.removeEventListener('scroll', handleScroll); } }; }, []); return ( <div ref={containerRef} style={{ height: '100vh', flexWrap: 'wrap', overflowY: 'auto', display: 'block', }} > {data.map((item, index) => ( <div key={index}>{/* 渲染每个数据项 */}</div> ))} </div> ); }; export default YourComponent; ``` 在上述代码中,我们将 `containerRef` 的类型声明为 `React.MutableRefObject<HTMLDivElement | null>`,表示它引用了一个 `HTMLDivElement` 元素或者是 `null`。这样可以避免 TypeScript 报错并确保类型安全。 希望这次回答能够解决您的问题。如果您还有其他疑问,请随时提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值