Как в массив useRef-ов запихнуть children?

Question

[Василий Васильков]

Не особо важно, но чисто для контекста: Пытаюсь реализовать "скроллер" - есть родительский элемент, в который пихается неограниченное кол-во тегов, а он при прокрутке колесика мыши крутит до следующего элемента.
Для этого нужно как то детектить все эти элементы, я пытался реализовать следующую схему:

interface IScrollerProps {
    children: JSX.Element[]
}

let items = useRef([])

{props.children.map((child, index) => 
      <div key={index} ref={items[index]}>
             {child}
      </div>
)}

На что тайпскрипт ругается:

TS7053: Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'MutableRefObject&lt;never[]&gt;'.<br/>No index signature with a parameter of type 'number' was found on type 'MutableRefObject&lt;never[]&gt;'.

Не могу понять, в чем проблема

Answer 1

[Alexandroppolus]

const refContainer = useRef<HTMLDivElement>(null);

.........

<div ref={refContainer}>
  {props.children.map((child, index) => 
      <div key={index}>
             {child}
      </div>
  )}
</div>

далее в refContainer.current.children у тебя актуальный набор элементов.

Answer 2

[Петр]

let containerRef = useRef(null);
containerRef.current.children[N];

Comments

[WbICHA]

containerRef.current.children[N];

Откуда тут чилдрен взялся?

[Петр]

WbICHA, От туда, что containerRef.current уже DOM элемент

[Василий Васильков]

Хорошо, насколько я понимаю, вы имели ввиду следующее

let containerRef = useRef([]);
ref={containerRef.current[index]}

Но это по прежнему не работает, все элементы containerRef являются undefined

[Петр]

Василий Васильков, Нет, это я не имел ввиду. У вас есть родительский элемент с ref и через него доступны все дочернии. И писать "ref={containerRef.current[index]}" не нужно

[Василий Васильков]

Петр, Можно конкретный пример кода? Допустим, просто получение 3-его элемента из дочерних элементов. Кажется, я вас немного не понимаю

[WbICHA]

Петр,

От туда, что containerRef.current уже DOM элемент

С чего это вдруг? Реф не обязан содержать дом элемент от слова вообще.

[WbICHA]

Василий Васильков,

Но это по прежнему не работает, все элементы containerRef являются undefined

Так у тебя пустой массив, естественно там всё андефайнд будет.

[Василий Васильков]

WbICHA, Нет, массив заполняется (или должен это делать) вот таким образом

{props.children.map((child, index) => 
      <div key={index} ref={items.current[index]}>
             {child}
      </div>
)}

[WbICHA]

Василий Васильков, ах, ты его в реф передаёшь, не заметил. Так вот, в реф надо передавать, внезапно, реф, а не андефайнд. А у тебя реф массива, а не массив рефов.

[Василий Васильков]

Ля, точно, спасибо

[Василий Васильков]

WbICHA, Можешь указать как ответ на вопрос, это помогло