Wie verwende ich mehrere Refs für ein Array von Elementen mit React Hooks?

Verwenden mehrerer Refs für ein Array von Elementen mit Hooks

Problemstellung:
Obwohl die Verwendung von Refs für ein einzelnes Element mit Hooks möglich ist Ganz einfach, dies wird komplexer, wenn es um ein Array von Elementen geht.

Implementierung:
Um mehrere Refs für ein Array von Elementen mithilfe von Hooks zu implementieren, können wir den useRef-Hook als nutzen folgt:

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

Verwendung:
Mit diesem Ansatz können Sie über itemsRef.current[index] auf die Elemente im Array zugreifen. Anders als im Beispiel in der Frage wird dadurch sichergestellt, dass die Refs korrekt aktualisiert werden, wenn sich das Array ändert.

Zusätzliche Hinweise:

• Da Hooks nicht darin verwendet werden können Schleifen wird der useEffect-Hook verwendet, um das itemsRef-Array bei erneuten Renderings zu aktualisieren, die durch Änderungen in props.items verursacht werden.
• Die Methode „slice()“ stellt sicher, dass das itemsRef-Array nur die Elemente enthält, die den aktuellen Requisiten entsprechen. Elemente-Array.

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