透過Hooks 對元素數組使用多個引用
問題：
如何使用React hooks API 為元素數組實作多個引用？
背景：
對單一元素使用引用很簡單，但將其擴展到數組元素需要不同的方法。
建議的解決方案：
由於鉤子無法在循環中使用，因此需要自訂方法：
第1 步：建立引用數組
先建立一個將保存引用清單的ref 物件。
<code class="javascript">const itemsRef = useRef([]);</code>
第2 步：存取元素引用
可以使用索引存取陣列中的每個元素：
<code class="javascript">itemsRef.current[n] // nth element's ref</code>
第3 步：在陣列更改時更新引用數組
確保ref 數組與元素數組保持同步。這可以在useEffect 掛鉤中完成：
<code class="javascript">useEffect(() => {
itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);</code>第4 步：將引用分配給數組元素
創建元素時，為每個元素分配適當的引用:
<code class="javascript">props.items.map((item, i) => (
<div
key={i}
ref={el => itemsRef.current[i] = el}
style={{ width: `${(i + 1) * 100}px` }}
>
...
</div>
));</code>按照以下步驟，您可以成功地對帶有鉤子的元素數組使用多個引用。
以上是如何使用 React Hooks 實作元素數組的多個參考？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
