useRef() Перехватчик пользовательского компонента

Question

Я пытаюсь создать панель навигации, которая, когда пользователь нажимает на одну из ссылок, прокручивает страницу до некоторого раздела. В приведенном выше коде каждый элемент является разделом моей страницы:

    <Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
    <Footer />

'Refs' был объявлен следующим образом с помощью хука useRef:

  const mainLogoRef = useRef(null)
  const salesRef = useRef(null)
  const introductionRef = useRef(null)
  const blogRef = useRef(null)

Функция, которую я использую для прокрутки, следующая:

  const scrollToRef = ref => {
    window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
  }

Дело в том, что "текущий" ключ всегда не определен. Когда я делаю что-то подобное:

<div ref={salesRef}> <Sales  /><div>

или

<section ref={salesRef}> <Sales  /><section>

Все работает нормально. Я предполагаю, что "ref" работает только с "чистыми" тегами html. Есть ли способ использовать ловушку useRef в пользовательском компоненте?

отказ от ответственности: извините за плохой английский, я не носитель языка.

Answer 1

На пользовательских компонентах refнеобходимо переадресовать.

Пример будет таким:

// inside Sales.js
const Sales = (props, ref) => (
  <div ref={ref}> // assigns the ref to an actual DOM element, the div
    /* anything you want to render here */
  </div>
)

export default React.forwardRef(Sales);

Это потому что ref(обычно) ссылка на элемент DOM. Компонент React может отображать несколько элементов DOM, поэтому вам нужно четко указать, гдеref должен быть назначен.