簡介
引用提供了一種方法存取 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中文網其他相關文章！
