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

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

Le hook useRef fournit une référence persistante à un élément de votre composant React. Il vous permet d'accéder et de modifier directement les éléments du DOM. Dans le cas d'un seul élément, l'utilisation de useRef est simple. Cependant, que se passe-t-il si vous souhaitez utiliser plusieurs références pour un tableau d'éléments ?

Le problème

Considérez le code suivant :

<code class="js">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>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);</code>

Ce code provoquera une erreur car elRef.current n'est pas un tableau. C'est une référence au premier élément du tableau.

La solution avec une référence externe

Une solution possible à ce problème est d'utiliser une référence externe pour conserver trace de plusieurs éléments. Voici un exemple :

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

const App = (props) => {
  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 ce cas, itemsRef.current est un tableau qui contient des références à tous les éléments du tableau. Vous pouvez accéder à ces éléments en utilisant itemsRef.current[n].

Remarque : Il est important de se rappeler que les crochets ne peuvent pas être utilisés à l'intérieur des boucles. Par conséquent, le hook useEffect est utilisé en dehors de la boucle pour mettre à jour le tableau itemsRef.

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!