如何使用 React Hooks 實作元素數組的多個參考？

透過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中文網其他相關文章！