在單個 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 元素不再可丟棄。