React Hooks：如何在自定义Hook中引用组件的父元素

要解决这个问题，核心思路是显式传递父元素的Ref到Hook中——因为React的自定义Hook无法直接获取组件的父元素，必须通过组件间的props传递父元素的引用，这样Hook才能安全地获取父元素的位置信息。下面是具体的修改方案：

步骤1：修改自定义Hook，接收父元素Ref参数 #

首先更新useMouseCoords Hook，让它接受一个父元素的Ref作为参数，同时修复原代码中的闭包问题和空值判断：

import { useState, useEffect, useCallback } from 'react';

const useMouseCoords = (parentRef) => {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  // 使用useCallback缓存事件处理函数，避免不必要的重渲染
  const handleCoords = useCallback((e) => {
    // 确保父元素Ref已绑定到DOM节点
    if (!parentRef.current) return;
    
    // 获取父元素的位置偏移
    const parentRect = parentRef.current.getBoundingClientRect();
    // 计算鼠标相对于父元素的坐标
    setCoords({
      x: e.clientX - parentRect.left,
      y: e.clientY - parentRect.top,
    });
  }, [parentRef]); // 依赖数组加入parentRef，确保Ref变化时更新函数

  useEffect(() => {
    if (typeof window === `undefined`) return;
    
    window.addEventListener('mousemove', handleCoords);
    return () => {
      window.removeEventListener('mousemove', handleCoords);
    };
  }, [handleCoords]); // 依赖数组加入handleCoords，确保函数更新时重新绑定事件

  return coords;
};

步骤2：更新MouseCursor组件，接收父元素Ref #

让MouseCursor组件接收父元素的Ref作为props，并传递给Hook：

const MouseCursor = ({ parentRef }) => {
  const { x, y } = useMouseCoords(parentRef);
  
  return (
    <div 
      className="mouse-cursor-button" 
      style={{ transform: `translate(${x}px, ${y}px)` }}
    >
      <div className="mouse-cursor-button__text">Click to play</div>
    </div>
  );
};

步骤3：在父组件中传递Ref #

最后，在包含MouseCursor的父组件中创建Ref，绑定到目标父元素，并传递给MouseCursor：

import { useRef } from 'react';

const ParentComponent = () => {
  // 创建Ref并绑定到父容器
  const parentRef = useRef(null);

  return (
    <div ref={parentRef} className="your-parent-container">
      {/* 将父元素Ref传递给MouseCursor */}
      <MouseCursor parentRef={parentRef} />
      {/* 其他子元素 */}
    </div>
  );
};

关键说明 #

1. 避免直接操作DOM父元素：不要通过ref.current.parentElement这种方式获取父元素，因为DOM结构可能动态变化，这种方式既不稳定也不符合React的数据流理念。
2. 闭包问题修复：原代码中offsetParent在组件初始化时获取，不会随父元素位置变化更新；使用useCallback和正确的依赖数组可以确保事件处理函数始终获取最新的父元素位置。
3. 空值安全：加入!parentRef.current的判断，避免组件挂载初期Ref未绑定到DOM节点导致的错误。

内容的提问来源于stack exchange，提问作者flowen