React: Как использовать ссылки в компоненте функции, который я не могу контролировать (например, из библиотеки)

Question

Не могу поверить, что не смог найти ответ на этот вопрос, поэтому, если я ошибаюсь, укажите мне правильное направление.

---

Я пытаюсь сделать что-то простое:

Есть компонент функции из библиотеки, который я включаю.

Мне нужно получить ссылку на него.

Важно, React говорит следующее:

Пересылка ссылок позволяет компонентам включить , предоставляя ссылку на любой дочерний компонент как свой собственный.

К сожалению, этот компонент библиотеки не включил использование forwardRef.

Как правильно получить ссылку на этот элемент?

Компонент сторонней библиотеки выглядит так (упрощенно):

function OutboundLink(props) {
  return (
    <a {...props}
        ...
    />
  )
}

Мой компонент выглядит так:

function MyComp(props) {
  const ref = useRef(null)
  return (
    <OutboundLink ref={ref} {...props} >
      {children}
    </OutboundLink>
  )
}

но меня приветствуют ошибки из-за невозможности передать ссылки на функциональный компонент. Обычно я вставляю forwardRef, но не могу в этом случае, так как не могу напрямую изменить код библиотеки.

Я видел это и это но я не думаю, что это применимо ко мне.

Есть идеи?

Answer 1

Вы не можете напрямую. Нет никакого хука, который позволил бы вам войти, если бы компонент не был написан таким образом.

Я думаю, что вам лучше всего было бы заключить в оболочку компонент, захватить ссылку, а затем углубиться в ее потомки с помощью методов DOM.

const wrapperRef = useRef(null)
const innerRef = useRef(null)

useEffect(() => {
  if (wrapperRef.current) {
    innerRef.current = wrapperRef.current.querySelector('a')
    // innerRef.current is now the first <a> tag inside <OutboundLink>
  }
})

return <div>
  <div ref={wrapperRef}>
    <OutboundLink {...props}>
      {children}
    </OutboundLink>
  </div>
</div>

Пример Codepen (просмотреть консоль)

Но на самом деле это немного хакерство. Вы должны использовать компонент, который обрабатывает это лучше. Посмотрите, как трудно было бы написать этот компонент самостоятельно с нуля. Это может быть тривиально, и оно того стоит.