有没有办法在React的函数内部调用你的主组件？

// 主组件
function App() {
  const handleClick = () => {
    console.log("调用了主组件的方法");
  };

  return <ChildComponent handleClick={handleClick} />;
}

// 子组件
function ChildComponent({ handleClick }) {
  useEffect(() => {
    handleClick(); // 在子组件内部调用主组件的方法
  }, []);

  return <div>子组件</div>;
}

// 创建Context
const MyContext = React.createContext();

// 主组件
function App() {
  const handleClick = () => {
    console.log("调用了主组件的方法");
  };

  return (
    <MyContext.Provider value={handleClick}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  const handleClick = useContext(MyContext);

  useEffect(() => {
    handleClick(); // 在子组件内部调用主组件的方法
  }, []);

  return <div>子组件</div>;
}

// 主组件
function App() {
  const handleClickRef = useRef();

  const handleClick = () => {
    console.log("调用了主组件的方法");
  };

  useEffect(() => {
    handleClickRef.current = handleClick;
  }, []);

  return <ChildComponent />;
}

// 子组件
function ChildComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log("调用了主组件的方法");
    };

    handleClick(); // 在子组件内部调用主组件的方法
  }, []);

  return <div>子组件</div>;
}