如何透過 React Hooks 對元素數組使用多個參考？

對帶有Hook 的元素數組使用多個引用

問題陳述：
雖然對帶有Hook 的單一元素使用ref 是簡單地說，在處理元素陣列時，這會變得更加複雜。

實現：
要使用鉤子實現元素數組的多個引用，我們可以利用useRef 鉤子如下：

<code class="js">const App = () => {
  const itemsRef = useRef([]);//create a ref instance for array

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, props.items.length);
  }, [props.items]);//update the `itemsRef` array on any change of `props.items`

  return props.items.map((item, i) => (
    <div
      key={i}
      // pass the element ref to the `itemsRef` array
      ref={el => (itemsRef.current[i] = el)}
      style={{ width: `${(i + 1) * 100}px` }}
    >
      ...
    </div>
  ));
};</code>

用法：
使用此方法，您可以透過itemsRef.current[index]存取數組中的元素。與問題中的範例不同，這可以確保在數組更改時正確更新引用。

附加說明：

• 因為鉤子不能在循環中，useEffect 鉤子用於在 props.items 更改導致重新渲染時更新 itemsRef 數組。
• slice() 方法確保 itemsRef 陣列僅包含與目前 props 對應的元素。項目數組。

以上是如何透過 React Hooks 對元素數組使用多個參考？的詳細內容。更多資訊請關注PHP中文網其他相關文章！