如何對元素數組使用帶有鉤子的多個引用？

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

useRef 鉤子提供對 React 元件中元素的持久引用。它允許您直接存取和修改 DOM 元素。對於單一元素，使用 useRef 很簡單。但是，如果您想對元素數組使用多個引用怎麼辦？

問題

考慮以下程式碼：

<code class="js">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>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);</code>

此程式碼會導致錯誤，因為 elRef.current 不是陣列。它是對數組中第一個元素的引用。

使用外部引用的解決方案

此問題的可能解決方案是使用外部引用來保留多個元素的追蹤。以下是一個範例：

<code class="js">const itemsRef = useRef([]);

const App = (props) => {
  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.current 是一個陣列，其中保存對陣列中所有元素的參考。您可以使用 itemsRef.current[n].

注意： 重要的是要記住鉤子不能在循環內使用。因此，在循環外部使用 useEffect 鉤子來更新 itemsRef 陣列。

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