Использование нескольких ссылок на один элемент React

Question

Я использую 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 prop может принимать только один ссылочный объект, а не список, как в пример выше.

Как я могу подойти к этой проблеме, чтобы я мог использовать несколько подобных хуков для одного и того же элемента? Я нашел пакет , который выглядит так, как будто это то, что я ищу, но я не уверен, что что-то упустил.

Answer 1

Ссылка React на самом деле является не чем иным, как контейнером для некоторых изменяемых данных, хранящихся как свойство 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>
  );
}