Wie verwalte ich mehrere Refs für ein Array von Elementen in React mithilfe von Hooks?

Mehrere Refs für ein Array von Elementen mithilfe von Hooks

In React können Entwickler mit dem useRef-Hook DOM-Referenzen auf Elemente verwalten. Typischerweise werden Referenzen verwendet, um auf ein einzelnes Element zuzugreifen. Allerdings ist dieser Ansatz möglicherweise nicht für Arrays von Elementen geeignet.

Um mit mehreren Refs für ein Array von Elementen mithilfe von Hooks zu arbeiten, ist ein etwas anderer Ansatz erforderlich. Betrachten wir die folgende Situation:

<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>

In diesem Beispiel versuchen wir, mehrere Referenzen zu erstellen, indem wir einfach dieselbe elRef an jedes Element im Array übergeben. Dieser Ansatz führt jedoch dazu, dass nur auf das letzte Element verwiesen wird.

Um dieses Problem zu lösen, können wir die folgende Technik nutzen:

<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>

In dieser verbesserten Lösung verwenden wir die itemsRef Array zur Aufnahme der Referenzen. Wir initialisieren das Array mit einem leeren Array. Im useEffect aktualisieren wir das Array „itemsRef“ so, dass es der Länge des Arrays „props.items“ entspricht. Dadurch wird sichergestellt, dass wir für jedes Element im Array eine entsprechende Referenz haben.

Jetzt können wir mit itemsRef.current[n] auf einzelne Elementreferenzen zugreifen, wobei n der Index des Elements im Array ist.

Das obige ist der detaillierte Inhalt vonWie verwalte ich mehrere Refs für ein Array von Elementen in React mithilfe von Hooks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!