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

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

Der useRef-Hook stellt einen dauerhaften Verweis auf ein Element in Ihrer React-Komponente bereit. Sie können damit direkt auf DOM-Elemente zugreifen und diese ändern. Im Falle eines einzelnen Elements ist die Verwendung von useRef unkompliziert. Was aber, wenn Sie mehrere Refs für ein Array von Elementen verwenden möchten?

Das Problem

Bedenken Sie den folgenden Code:

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

Dieser Code verursacht einen Fehler, da elRef.current kein Array ist. Es handelt sich um eine Referenz auf das erste Element im Array.

Die Lösung mit einer externen Referenz

Eine mögliche Lösung für dieses Problem besteht darin, eine externe Referenz zur Aufbewahrung zu verwenden Verfolgung mehrerer Elemente. Hier ist ein Beispiel:

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

In diesem Fall ist itemsRef.current ein Array, das Verweise auf alle Elemente im Array enthält. Sie können mit itemsRef.current[n] auf diese Elemente zugreifen.

Hinweis: Es ist wichtig zu bedenken, dass Hooks nicht innerhalb von Schleifen verwendet werden können. Daher wird der useEffect-Hook außerhalb der Schleife verwendet, um das itemsRef-Array zu aktualisieren.

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