如何在功能组件中获取父引用

Question

我试图在Functional组件中使用addEventListener，以便将onclick事件附加到其parent。

因此，当单击其父项（红色框）时，应打印console.log("Test")。

首先，我应该获得它的引用以访问其父级。

所以我尝试了：

https://codesandbox.io/s/red-framework-vv9j7

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

interface ContextMenuProps {
  isVisible: boolean;
}

const ContextMenu: React.FC<ContextMenuProps> = props => {
  const thisComponent = useRef<any>(this);

  useEffect(() => {
    if (thisComponent && thisComponent.current) {
      thisComponent.current.addEventListener("click", test);
    }
  }, []);

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

  return <></>;
};

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

但是thisComponent未定义。