Comment utiliser plusieurs références pour un tableau d'éléments avec des crochets React ?

Utilisation de plusieurs références pour un tableau d'éléments avec des crochets

Énoncé du problème :
Bien que l'utilisation de références pour un seul élément avec des crochets soit simple, cela devient plus complexe lorsqu'il s'agit d'un tableau d'éléments.

Implémentation :
Pour implémenter plusieurs références pour un tableau d'éléments à l'aide de hooks, nous pouvons exploiter le hook useRef comme suit :

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

Utilisation :
Avec cette approche, vous pouvez accéder aux éléments du tableau via itemsRef.current[index]. Contrairement à l'exemple de la question, cela garantit que les références sont correctement mises à jour lorsque le tableau change.

Notes supplémentaires :

• Étant donné que les hooks ne peuvent pas être utilisés dans boucles, le hook useEffect est utilisé pour mettre à jour le tableau itemsRef lors des rendus provoqués par des modifications dans props.items.
• La méthode slice() garantit que le tableau itemsRef contient uniquement les éléments correspondant aux accessoires actuels. tableau d'éléments.

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!