Динамическое создание ссылок в React

TL; DR: я создал npm пакет с именем use-dynamic-refs для динамического создания ссылок. Найдите здесь

Эта проблема

Одна из моих основных проблем с React - динамическая установка и получение компонента refs. Это было особенно болезненно, потому что мне нужно было передать созданное refs нескольким компонентам, а иногда и слоям глубоко внутри дерева компонентов.

Раньше мне приходилось что-то делать в отношении:

const Before = () => {
  const  foo  = ['random_id_1' , 'random_id_2']'
  const refsArray  =  foo.map(() => createRef());
  return (
    <div>
      {data.map( eachId  => (
        <div ref={refsArray[index].current} key={eachId}/>)}
    </div>
  );
};

И, чтобы использовать ref позже, возможно, верните массив объектов в refsArray с помощью ключа id, подобного этому

const refsArray  =  foo.map(eachId => ({id: eachId, ref: createRef()}));

Как я это решил

Я создал крошечный пакет npm под названием use-dynamic-refs. С помощью хука use-dynamic-refs вы можете просто сделать:

npm i use-dynamic-refs

а потом,

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 id1 = getRef('random_id_1');
    console.log(id1)
  }, [])
    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>
         {/*  Set refs dynamically in Array.map() */}
        { foo.map((eachId, idx) => (
          <div ref={setRef(eachId)}> Hello {eachId} </div>))}
      </>
    )
}

Как это работает

Под капотом use-dynamic-refs используется одноэлементный экземпляр Javascript Map. Это дает вам хранилище пар ключ-значение ваших ссылок, хранящихся по идентификатору.

Примечание. Проблема с этим подходом заключается в том, что вам нужно убедиться, чтоid являются уникальными, чтобы избежать перезаписи существующих ссылок.

Ссылки говорите?

Репозиторий Github:
https://github.com/fitzmode/use-dynamic-refs

NPM:
https://www.npmjs.com/package/use-dynamic-refs

Обратная связь и PR приветствуются!