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

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

Einführung

Refs bieten eine Möglichkeit dazu Zugriff auf HTML-Elemente in React-Komponenten. Während Sie Refs zum Verwalten einzelner Elemente verwenden können, kann es Situationen geben, in denen Sie Refs auf ein Array von Elementen anwenden müssen. In diesem Artikel wird erläutert, wie Sie mithilfe von Hooks in React mehrere Refs für ein Array von Elementen implementieren.

Einzelelement-Ref

Die Verwendung von Refs für ein einzelnes Element ist unkompliziert:

<code class="javascript">const elRef = useRef();
const [elWidth, setElWidth] = useState();

useEffect(() => {
  setElWidth(elRef.current.offsetWidth);
}, []);</code>

Array of Elements Ref

Die Anwendung des obigen Ansatzes auf ein Array von Elementen funktioniert nicht, da allen Elementen dieselbe Referenz zugewiesen wird. Stattdessen müssen wir ein Array von Referenzen erstellen und diese jedem Element einzeln zuweisen:

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

// Initialize the array of refs
useEffect(() => {
  itemsRef.current = itemsRef.current.slice(0, props.items.length);
}, [props.items]);

// Use the array of refs in JSX
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 Lösung ist itemsRef.current ein Array von Referenzen auf die HTML-Elemente. Sie können auf einzelne Elemente zugreifen, indem Sie das Array indizieren, z. B. itemsRef.current[0].

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