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)

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

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

Дело в том, что клавиша 'current' всегда неопределена. Когда я делаю что-то подобное:

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

или

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

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

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

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.