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

如何透過 Hooks 對元素數組使用多個引用？

簡介

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