react 函数组件 通过ref 父组件 使用 孙组件的方法

在React中，函数组件通常不直接支持像传统类组件那样的`this`指向，因为它们是无状态的。如果你想要在父组件中调用孙组件的方法，可以借助`ref`来间接访问。首先，你需要创建一个ref并将其赋值给孙组件的实例：

import React, { useRef } from 'react';

// 孙组件 (ChildComponent)
const ChildComponent = ({ doSomething }) => {
  const handleClick = () => {
    // 自己的方法...
  };

  return <button onClick={handleClick}>点击我</button>;
};

// 父组件 (ParentComponent)
const ParentComponent = () => {
  const childRef = useRef(null);

  const callGrandchildMethod = () => {
    if (childRef.current) {
      childRef.current.handleClick(); // 调用孙组件的handleClick方法
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} /> {/* 将ref传递给孙组件 */}
      <button onClick={callGrandchildMethod}>调用孙方法</button>
    </>
  );
};

在这个例子中，当你在父组件上点击按钮时，会触发`callGrandchildMethod`函数，它检查孙组件是否存在并通过`ref`获取它的引用，然后调用`handleClick`方法。