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

Пользователь

от jett , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от elda , год назад

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

Пользователь

от olen.shanahan , 2 месяца назад

@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 с динамическим количеством элементов.