Reactjs 如何访问当前组件&x2019；钩子中的顶级元素ref？

我想实现一个特定的鼠标悬停行为，可以添加到应用程序的任何部分

如果可以避免的话，我希望不要创建额外的嵌套标记

在Angular中，这可以通过类似

的方法实现，在这里我实现了

myBehavior

在React with functional components中，实现这一点的主流方法似乎是使用钩子，在钩子中，我可以将a与组件中的顶级元素相关联，并将该引用传递给我的钩子（

useMyBehavior（mainElRef…）

）

虽然这似乎是有道理的，但不幸的是，我必须对每个想要这种行为的组件（可能有很多）这样做。此外，如果顶级元素是另一个自定义组件，那么获取底层DOM元素（

div

，

span

，等等）的“具体”引用可能涉及更多的逻辑

所有这些都是可行的，并且比额外的嵌套标记（这对现有样式有很多影响）要好，但是如果可能的话，我宁愿避免使用大量的工作和额外的逻辑。毕竟，我需要我的钩子知道的是鼠标指针何时进入当前组件的元素的边界框

---

因此，问题就来了：让我的钩子智能地获取作为当前组件顶级包装器的具体DOM元素，而不必传递ref，最可行的方法是什么？

不幸的是，没有捷径可以将

ref

获取到组件的顶级DOM元素。React钩子不“知道”它们在哪个组件中呈现。添加此功能将破坏React的一个功能：

React组件隐藏其实现细节，包括其渲染输出

但是，您可以在钩子中创建并返回一个

ref

，因此不需要传递

ref

函数useMyBehavior（）{
const ref=useRef（）；
useffect（（）=>{
在mouseover（e）上的函数{
//使用ref.current执行任何操作
}
ref.current.addEventListener（“鼠标悬停”，onMouseover）；
return（）=>ref.current.removeEventListener（“mouseover”，onMouseover）；
}，[ref.current]）；
返回ref；
}
函数组件（）{
const ref=useMyBehavior（）；
返回(
);
}
const NestedComponent=React.forwardRef（（props，ref）=>{
返回(
{props.prop}
);
}

---

只要自定义组件使用

React.forwardRef

将ref转发到DOM元素，钩子就可以工作。请参阅上的文档部分。

“但是，您可以在钩子中创建并返回一个ref，因此不需要将其传递给ref。”-我错过了关键点。

forwardRef（）

，我还没有用过，看起来就是这样。非常感谢！在查看转发的参考文献时，我偶然发现了HOC概念，在某些情况下也有意义