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

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

Однако, нельзя хранить children в массиве useRef-ов напрямую, так как useRef создает и возвращает объект, а не ссылку на компонент или его значение. Но можно создать массив useRef-ов и сохранить в них ссылки на компоненты, ссылаясь на них через .current.

Вот пример кода, который показывает, как создать массив useRef-ов и сохранить в них ссылки на компоненты:

import React, { useRef } from "react";

const Component = () => {
  const childRefs = useRef([]);

  const addChildRef = (child) => {
    childRefs.current.push(child);
  };

  return (
    <div>
      {/* Ваши компоненты, на которые хотите сохранить ссылки */}
      <Child ref={addChildRef} />
      <Child ref={addChildRef} />
      <Child ref={addChildRef} />
    </div>
  );
};

const Child = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    // Функции или значения, которые вы хотите передать в родительский компонент
  }));

  return <div>Child Component</div>;
});

В этом коде childRefs - это массив useRef-ов, и в каждом append вызывается push с текущим компонентом в childRefs.current.

Обратите внимание, что для того, чтобы передать ref через компоненты, мы используем React.forwardRef. Это позволяет нам получить доступ к ref в компоненте Child и затем использовать его в хуке useImperativeHandle для передачи функций или значений в родительский компонент.

Надеюсь, это поможет вам понять, как сохранить ссылки на компоненты в массиве useRef-ов.