Как передать массив Refs в другой компонент?

Question

[Fedyaaaa]

Есть компонент Component1, в котором есть массив Refs useRef([]). Пытаюсь передать этот массив в другой компонент, но выдаёт ошибку: "Cannot read properties of undefined (reading 'current')", что невозможно прочитать свойства. Подскажите, как решить проблему?
const sectionRefs = useRef([]);

<ScrollToNextSection visibleSection={visibleSection} ref={sectionRefs} />

import { useState, useRef, forwardRef } from "react";
import "./ScrollToNextSection.css";

function ScrollToNextSection() {
  const ScrollToSection = ({ visibleSection, ref }) => {
    const currentIndex = ref.current.findIndex(
      (ref) => ref && ref.id === visibleSection
    );
    const nextSection = ref.current[currentIndex + 1];

    if (nextSection) {
      nextSection.scrollIntoView({ behavior: "smooth" });
      return;
    }

    ref.current[0].scrollIntoView({ behavior: "smooth" });
  };

  return (
    <button onClick={ScrollToSection} className="scroll-btn">
      Вниз
    </button>
  );
}
export default ScrollToNextSection;

Comments

[Алексей Уколов]

С чего вы взяли, что в обработчик клика кто-то передаёт объект { visibleSection, ref }? Зачем вы продолжаете бороться с Реактом там, где он не нужен?

[Fedyaaaa]

Алексей Уколов, а как сделать по другому? Без реакта

[Алексей Уколов]

Я вам в прошлом вопросе написал: рендерите разметку сервером и напишите простейший js, который будет скролить куда надо.

[Fedyaaaa]

Алексей Уколов, сервером в смысле на бэке?

[historydev]

Fedyaaaa, нет, на бересте)

Answer 1

[Nik Faraday]

Попробуйте вот так:

import { useState, useRef, forwardRef } from "react";
import "./ScrollToNextSection.css";

const ScrollToNextSection = forwardRef(({ visibleSection }, ref) => {
  const scrollToSection = () => {
    const currentIndex = ref.current.findIndex(
      (sectionRef) => sectionRef && sectionRef.id === visibleSection
    );
    const nextSection = ref.current[currentIndex + 1];

    if (nextSection) {
      nextSection.scrollIntoView({ behavior: "smooth" });
    } else if (ref.current[0]) {
      ref.current[0].scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <button onClick={scrollToSection} className="scroll-btn">
      Вниз
    </button>
  );
});

export default ScrollToNextSection;