Wie implementiert man mehrere Refs für ein Array von Elementen mit React Hooks?

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

Frage:

Wie kann das? Mehrere Refs für ein Array von Elementen mithilfe der React-Hooks-API implementiert werden?

Hintergrund:

Die Verwendung von Refs für ein einzelnes Element ist unkompliziert, aber die Erweiterung auf ein Array von Elementen erfordert einen anderen Ansatz.

Vorgeschlagene Lösung:

Da Hooks nicht innerhalb von Schleifen verwendet werden können, ist ein benutzerdefinierter Ansatz erforderlich:

Schritt 1: Erstellen Sie ein Array von Referenzen.

Erstellen Sie zunächst ein Referenzobjekt, das eine Liste von Referenzen enthält.

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

Schritt 2: Greifen Sie auf Elementreferenzen zu

Auf jedes Element im Array kann über den Index zugegriffen werden:

<code class="javascript">itemsRef.current[n] // nth element's ref</code>

Schritt 3: Ref-Array bei Array-Änderung aktualisieren

Stellen Sie sicher, dass das Ref-Array mit dem Array der Elemente synchronisiert bleibt. Dies kann in einem useEffect-Hook erfolgen:

<code class="javascript">useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);</code>

Schritt 4: Referenzen den Array-Elementen zuweisen

Weisen Sie beim Erstellen der Elemente jedem die entsprechende Referenz zu :

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

Indem Sie diese Schritte befolgen, können Sie erfolgreich mehrere Refs für ein Array von Elementen mit Hooks verwenden.

Das obige ist der detaillierte Inhalt vonWie implementiert man 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!