简介
引用提供了一种方法访问 React 组件中的 HTML 元素。虽然您可以使用 refs 来管理单个元素，但在某些情况下您可能需要将 refs 应用到元素数组。本文探讨了如何在 React 中使用钩子实现元素数组的多个引用。
单个元素引用
对单个元素使用引用非常简单：
<code class="javascript">const elRef = useRef();
const [elWidth, setElWidth] = useState();
useEffect(() => {
setElWidth(elRef.current.offsetWidth);
}, []);</code>元素引用数组
将上述方法应用于元素数组将不起作用，因为它将相同的引用分配给所有元素。相反，我们需要创建一个引用数组并将它们单独分配给每个元素：
<code class="javascript">const itemsRef = useRef([]);
// Initialize the array of refs
useEffect(() => {
itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);
// Use the array of refs in JSX
return props.items.map((item, i) => (
<div
key={i}
ref={(el) => (itemsRef.current[i] = el)}
style={{ width: `${(i + 1) * 100}px` }}
>
...
</div>
));</code>在此解决方案中，itemsRef.current 是对 HTML 元素的引用的数组。您可以通过索引数组来访问各个元素，例如 itemsRef.current[0].
以上是如何通过 React Hooks 对元素数组使用多个引用？的详细内容。更多信息请关注PHP中文网其他相关文章！
