在使用React的createRef
或useRef
时,如果你发现它们总是以最后一个值为目标,而不是它们应该去的地方,这通常是因为你在循环中创建了多个引用,但没有为每个引用分配一个唯一的键或标识符。
createRef
:这是React的一个类组件API,用于创建一个可以在组件的整个生命周期内保持不变的引用。useRef
:这是React的一个Hooks API,用于函数组件,功能与createRef
类似,但它是基于Hooks的,因此只能在函数组件或自定义Hooks中使用。当你在循环中创建多个引用时,例如在一个列表渲染中,如果没有为每个元素分配一个唯一的键,React可能会复用之前的DOM节点,导致ref
指向最后一个元素。
确保在渲染列表时为每个元素分配一个唯一的键。这有助于React正确地识别和更新每个元素。
const listItems = items.map((item, index) => (
<li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
{item.text}
</li>
));
在这个例子中,item.id
作为唯一键,listItemRefs
是一个数组,用于存储每个元素的引用。
使用回调函数来设置ref
,这样可以确保每次渲染时都会调用该函数,从而正确地设置每个元素的引用。
const listItems = items.map((item, index) => (
<li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
{item.text}
</li>
));
这种技术通常用于需要直接访问DOM元素的场景,例如:
import React, { useRef } from 'react';
function ListComponent({ items }) {
const listItemRefs = useRef([]);
return (
<ul>
{items.map((item, index) => (
<li key={item.id} ref={el => (listItemRefs.current[index] = el)}>
{item.text}
</li>
))}
</ul>
);
}
export default ListComponent;
通过上述方法,你可以确保createRef
或useRef
指向正确的DOM元素,而不是总是以最后一个值为目标。
领取专属 10元无门槛券
手把手带您无忧上云