Comment implémenter 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

Question :

Comment peut-on plusieurs références peuvent-elles être implémentées pour un tableau d'éléments à l'aide de l'API React hooks ?

Contexte :

L'utilisation de références pour un seul élément est simple, mais l'étendre à un tableau des éléments nécessite une approche différente.

Solution proposée :

Étant donné que les crochets ne peuvent pas être utilisés dans les boucles, une approche personnalisée est nécessaire :

Étape 1 : Créer un tableau de références

Commencez par créer un objet ref qui contiendra une liste de références.

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

Étape 2 : Accéder aux références des éléments

Chaque élément du tableau est accessible à l'aide de l'index :

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

Étape 3 : Mettre à jour le tableau de référence en cas de changement de tableau

Assurez-vous que le tableau ref reste synchronisé avec le tableau d'éléments. Cela peut être fait dans un hook useEffect :

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

Étape 4 : Attribuer des références aux éléments du tableau

Lors de la création des éléments, attribuez la référence appropriée à chacun :

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

En suivant ces étapes, vous pouvez utiliser avec succès plusieurs références pour un tableau d'éléments avec des hooks.

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!