Comment gérer plusieurs références pour un tableau d'éléments dans React à l'aide de hooks ?

Références multiples pour un tableau d'éléments à l'aide de hooks

Dans React, le hook useRef permet aux développeurs de gérer les références DOM aux éléments. En règle générale, les références sont utilisées pour accéder à un seul élément. Cependant, cette approche peut ne pas convenir aux tableaux d'éléments.

Pour travailler avec plusieurs références pour un tableau d'éléments à l'aide de hooks, une approche légèrement différente est requise. Considérons la situation suivante :

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

Dans cet exemple, nous essayons de créer plusieurs références en passant simplement le même elRef à chaque élément du tableau. Cependant, cette approche entraînera le référencement uniquement du dernier élément.

Pour surmonter ce problème, nous pouvons exploiter la technique suivante :

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

Dans cette solution améliorée, nous utilisons la propriété itemsRef tableau pour contenir les références. Nous initialisons le tableau avec un tableau vide. Dans useEffect, nous mettons à jour le tableau itemsRef pour qu'il corresponde à la longueur du tableau props.items. Cela garantit que nous avons une référence correspondante pour chaque élément du tableau.

Maintenant, nous pouvons accéder aux références d'éléments individuels en utilisant itemsRef.current[n], où n est l'index de l'élément dans le tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!