React Hooks中父组件调用子组件方法

在 React Hooks 中，父组件可以通过使用 `useRef` 来获取子组件实例的引用，并调用子组件的方法。

首先，在子组件中，你需要使用 `useImperativeHandle` 将子组件方法暴露给父组件。例如，假设子组件的名字是 `ChildComponent`，子组件中有一个名为 `childMethod` 的方法：

import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod() {
      // 子组件方法的逻辑
    }
  }));

  // 子组件的其他逻辑和 JSX

  return (
    // 子组件的 JSX
  );
});

export default ChildComponent;

然后，在父组件中，你可以使用 `useRef` 来获取子组件的引用，并调用子组件的方法。以下是一个示例：

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    childRef.current.childMethod(); // 调用子组件的方法
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>调用子组件方法</button>
    </>
  );
};

export default ParentComponent;

通过使用 `useRef` 创建一个引用 `childRef`，然后将其传递给子组件的 `ref` 属性。在父组件中，你可以使用 `childRef.current` 来访问子组件实例，并调用其方法。

这样，当点击父组件中的按钮时，就会调用子组件的方法 `childMethod`。请注意，在父组件中调用子组件方法之前，确保子组件已经渲染完成。