Как сделать массив из ref в react typescript?

@jett 

Чтобы создать массив из ref в React TypeScript, вы можете использовать React.RefObject<T>[], где T - это тип объекта, на который ссылается ref. Например, если вы хотите создать массив refs для элементов input, вы можете использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React, { useRef } from 'react';

function MyComponent() {
  const refs = useRef<HTMLInputElement>([]);
  
  // ...

  return (
    <>
      <input ref={refs.current[0]} />
      <input ref={refs.current[1]} />
      <input ref={refs.current[2]} />
    </>
  );
}

В этом примере refs будет массивом из трех React.RefObject<HTMLInputElement>, каждый из которых может быть передан в ref соответствующего элемента input.

@jett 

Также есть более практичный способ создания массива из ref в React TypeScript при помощи хука useMemo. Вот пример:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import React, { useRef, useMemo } from 'react';

function MyComponent() { const numRefs = 3; const refs = useMemo(() => Array.from({ length: numRefs }, () => useRef(null)), [numRefs]);

// ...

return ( <> </> ); }

В этом примере мы используем хук useMemo для создания массива useRef и сохраняем его в переменной refs. Количество элементов в массиве определяется переменной numRefs. Затем мы передаем каждый элемент массива refs в ref для соответствующего элемента input. Этот подход позволяет создавать массив из ref с динамическим количеством элементов.