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

Question

我正在使用这个配方中定义的useHover()反应钩子。 钩子返回一个ref和一个 boolean 指示用户当前是否悬停在由该ref标识的元素上。 可以这样使用...

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

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

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

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属性只能接受单个引用 object，而不是上面示例中的列表。

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

Answer 1

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

{
  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>
  );
}

Answer 2

下面记录了一个简单的方法来解决这个问题。

注意：元素上的ref属性接受一个函数，稍后在可用时使用元素或节点调用此函数。

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

  return (
    <div ref={myRef}>
    </div>
  );
}

因此，上面的myRef是一个有定义的函数

function(element){
 // something done here
}

所以一个简单的解决方案如下

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

  return (
    <div ref={(el)=> {myRef(el); anotherRef(el);}}>
    </div>
  );
}

Answer 3

ref={((el: HTMLDivElement) => setNodeRef(el)) && ref} 这对我仍然不起作用。 它不会产生 js 错误，但我的 dnd-kit 元素不再可丢弃。