React：如何在我无法控制的函数组件中使用引用（即来自库）

Question

我不敢相信我找不到答案，所以如果我错了，请指出正确的方向。

\n\n

---

\n\n

我正在尝试做一些简单的事情：

\n\n

我包含了一个来自库的功能组件。

\n\n

我需要得到一个参考。

\n\n

至关重要的是，React 是这么说的：

\n\n

\n

引用转发允许组件选择将任何子组件\xe2\x80\x99s 引用公开为自己的引用。

\n

\n\n

不幸的是，这个库组件没有选择使用forwardRef.

\n\n

获取此元素的引用的正确方法是什么？

\n\n

有问题的第 3 方库组件如下所示（简化）：

\n\n

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

\n\n

我的组件看起来像这样：

\n\n

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

\n\n

但我遇到了有关无法将引用传递给函数组件的错误。通常我会换行forwardRef，但在这种情况下不能换行，因为我无法直接修改库的代码。

\n\n

我确实看到了这个和这个，但认为它们都不适用于我。

\n\n

有任何想法吗？

\n

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示例（查看控制台）

但实际上，这有点像黑客。您应该使用可以更好地处理此问题的组件。看看从头开始自己编写这个组件有多难。这可能是微不足道的，也是值得的。