如何使用鉤子管理 React 中元素數組的多個參考？

使用 Hooks 對元素數組進行多個引用

在 React 中，useRef 鉤子允許開發人員管理對元素的 DOM 引用。通常，引用用於存取單一元素。但是，這種方法可能不適合元素數組。

要使用鉤子處理元素數組的多個引用，需要稍微不同的方法。讓我們考慮以下情況：

<code class="javascript">const { useRef, useState, useEffect } = React;

const App = () => {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() => {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    <div>
      {[1, 2, 3].map(el => (
        <div ref={elRef} style={{ width: `${el * 100}px` }}>
          Width is: {elWidth}
        </div>
      ))}
    </div>
  );
};</code>

在此範例中，我們嘗試透過簡單地將相同的 elRef 傳遞給陣列中的每個元素來建立多個參考。但是，這種方法將導致僅引用最後一個元素。

為了解決這個問題，我們可以利用以下技術：

<code class="javascript">const App = props => {
  const itemsRef = useRef([]);
  // you can access the elements with itemsRef.current[n]

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, props.items.length);
  }, [props.items]);

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

在這個改進的解決方案中，我們使用 itemsRef數組來保存引用。我們用一個空數組初始化該數組。在 useEffect 中，我們更新 itemsRef 陣列以符合 props.items 陣列的長度。這確保了數組中的每個項目都有對應的參考。

現在，我們可以使用 itemsRef.current[n] 來存取各個元素引用，其中 n 是數組中元素的索引。

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