在单个 React 元素上使用多个 ref

Question

我正在使用this recipe 中定义的useHover() 反应钩子。该钩子返回一个ref 和一个布尔值，指示用户当前是否悬停在此ref 标识的元素上。可以这样用……

function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
    </div>
  );
}

现在假设我想使用另一个名为useDrag 的（假设的）钩子，它返回一个ref 和一个布尔值，指示用户是否在页面周围拖动当前元素。我想像这样在与以前相同的元素上使用它...

function App() {
  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  return (
    <div ref={[hoverRef, dragRef]}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}

这不起作用，因为 ref 属性只能接受一个引用对象，而不是上面示例中的列表。

如何解决这个问题，以便在同一个元素上使用多个这样的钩子？我找到了一个package，看起来可能就是我要找的东西，但我不确定我是否遗漏了什么。

Answer 1

React ref 实际上只是一些可变数据的容器，存储为current 属性。有关详细信息，请参阅React docs。

{
  current: ... // my ref content
}

---

考虑到这一点，您应该可以手动解决：

function App() {
  const myRef = useRef(null);

  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  useEffect(function() {
    hoverRef.current = myRef.current;
    dragRef.current = myRef.current;
  }, [myRef.current]);

  return (
    <div ref={myRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}