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

在React函数组件中，如果你想要在父组件内调用孙组件的方法，你可以通过 prop 将这个方法作为属性传递给孙组件。下面是一个简单的例子：

// 父组件（GrandparentComponent.js）
import Child from './ChildComponent';

function GrandparentComponent() {
  const callGrandchildMethod = () => {
    // 调用孙组件的方法
    this.props.callGrandchildFunction();
  };

  return (
    <div>
      <Child callGrandchildFunction={callGrandchildMethod} />
    </div>
  );
}

export default GrandparentComponent;

// 孙组件（ChildComponent.js）
import React, { useState } from 'react';

const ChildComponent = ({ callGrandchildFunction }) => {
  const [grandChildState, setGrandChildState] = useState('初始状态');

  const handleGrandChildAction = () => {
    // 实现孙组件的方法
    callGrandchildFunction(); // 这里会调用父组件传递进来的 function
    // ...其他操作...
  };

  return (
    <div>
      <button onClick={handleGrandChildAction}>点击触发方法</button>
      <p>孙组件的状态: {grandChildState}</p>
    </div>
  );
};

export default ChildComponent;

在这个例子中，`GrandparentComponent`将`callGrandchildFunction`方法作为 prop 传递给`ChildComponent`。当用户在孙组件的按钮上点击时，`handleGrandChildAction`会被调用，进而调用了`callGrandchildFunction`，实现了父子组件间的通信。