Comment ajouter dynamiquement des "refs" avec des hooks react?

Question

J'ai donc un tableau de données et je génère une liste de composants avec ces données. J'aimerais avoir une référence sur chaque élément généré pour calculer la hauteur. Je sais comment le faire avec un composant Class, mais je voudrais le faire avec React Hooks.

Voici un exemple expliquant ce que je veux faire:

import React, {useState, useCallback} from 'react'
const data = [
  {
    text: 'test1'
  },
  {
    text: 'test2'
  }
]
const Component = () => {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      {
        data.map((item, index) => 
          <div ref={measuredRef} key={index}>
            {item.text}
          </div>
        )
      }
    </div>
  )
}

Answer 1

J'ai créé un petit paquet npm qui expose un React Hook pour gérer les paramètres et obtenir les références dynamiquement car je rencontre souvent le même problème.

npm i use-dynamic-refs

Voici un exemple simple.

import React, { useEffect } from 'react';
import useDynamicRefs from 'use-dynamic-refs';

const Example = () =>  {
  const foo = ['random_id_1', 'random_id_2'];
  const [getRef, setRef] =  useDynamicRefs();

  useEffect(() => {
    // Get ref for specific ID 
    const id = getRef('random_id_1');
    console.log(id)
  }, [])

    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>

         {/*  Set refs dynamically in Array.map() */}
        { foo.map( eachId => (
          <div key={eachId} ref={setRef(eachId)}>Hello {eachId}</div>))}
      </>
    )
}

export default Example;