React函数组件中获取父元素引用及解决thisComponent undefined问题

首先，你的代码里有几个关键问题导致thisComponent拿不到元素，甚至逻辑方向也偏离了需求：

1. 函数组件中不存在this #

React函数组件没有类组件那样的实例this，所以你初始化useRef时传this完全是错误的。正确的初始化方式应该是useRef<HTMLDivElement>(null)（对应实际DOM元素的类型），或者直接useRef(null)。

2. ContextMenu组件没有渲染任何可挂载ref的DOM元素 #

你的ContextMenu组件返回的是空片段<></>，没有实际的DOM节点，就算ref初始化正确，也没有元素可以挂载，所以thisComponent.current永远是null。

3. 逻辑方向错误：你要监听父元素（红色盒子），却在子组件里绑定自身元素 #

你的需求是点击App里的红色div时打印"Test"，但代码却在子组件ContextMenu里尝试绑定自己的元素，完全没命中目标。

正确的实现方式 #

方式一：直接在父元素上绑定点击事件（最简单推荐） #

既然要监听红色盒子的点击，直接在App组件里给目标div添加onClick事件即可：

import React from "react";

const ContextMenu: React.FC = () => {
  // 子组件若无需额外逻辑，保持原结构即可
  return <></>;
};

function App() {
  const test = () => {
    console.log("Test");
  };

  return (
    <div 
      className="App" 
      style={{ width: "200px", height: "200px", backgroundColor: "red" }}
      onClick={test} // 直接给父元素绑定点击事件
    >
      <ContextMenu />
    </div>
  );
}

export default App;

方式二：子组件参与父元素点击逻辑（按需选择） #

如果必须让子组件控制父元素的点击行为，推荐通过props传递回调，保持React数据流的合理性：

import React from "react";

interface ContextMenuProps {
  onParentClick: () => void;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ onParentClick }) => {
  // 子组件可根据自身逻辑决定是否触发父元素点击回调
  // 例如：某个状态满足时才调用onParentClick()
  return <></>;
};

function App() {
  const test = () => {
    console.log("Test");
  };

  return (
    <div 
      className="App" 
      style={{ width: "200px", height: "200px", backgroundColor: "red" }}
      onClick={test}
    >
      <ContextMenu onParentClick={test} />
    </div>
  );
}

export default App;

方式三：传递父元素ref给子组件绑定事件（不推荐，耦合性高） #

如果一定要在子组件中通过addEventListener绑定父元素，需要把父元素的ref传递给子组件，同时记得清理事件防止内存泄漏：

import React, { useRef, useEffect } from "react";

interface ContextMenuProps {
  parentRef: React.RefObject<HTMLDivElement>;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ parentRef }) => {
  const test = () => {
    console.log("Test");
  };

  useEffect(() => {
    const parentElement = parentRef.current;
    if (parentElement) {
      parentElement.addEventListener("click", test);
      // 组件卸载或依赖变更时清理事件
      return () => {
        parentElement.removeEventListener("click", test);
      };
    }
  }, [parentRef, test]);

  return <></>;
};

function App() {
  const parentRef = useRef<HTMLDivElement>(null);

  return (
    <div 
      ref={parentRef}
      className="App" 
      style={{ width: "200px", height: "200px", backgroundColor: "red" }}
    >
      <ContextMenu parentRef={parentRef} />
    </div>
  );
}

export default App;

总结来说，方式一是最直接且符合React设计理念的实现；如果子组件需要参与逻辑，方式二更合适；方式三仅在特殊场景下使用，因为会增加组件间的耦合度。

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