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

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

Introduction

Les références fournissent un moyen de accéder aux éléments HTML dans les composants React. Bien que vous puissiez utiliser des références pour gérer des éléments uniques, il peut arriver que vous deviez appliquer des références à un tableau d'éléments. Cet article explique comment implémenter plusieurs références pour un tableau d'éléments à l'aide de hooks dans React.

Référence d'élément unique

L'utilisation de références pour un seul élément est simple :

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

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

Référence de tableau d'éléments

L'application de l'approche ci-dessus à un tableau d'éléments ne fonctionnera pas car elle attribue la même référence à tous les éléments. Au lieu de cela, nous devons créer un tableau de références et les attribuer individuellement à chaque élément :

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

Dans cette solution, itemsRef.current est un tableau de références aux éléments HTML. Vous pouvez accéder à des éléments individuels en indexant le tableau, par exemple, itemsRef.current[0].

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!