react hook 父组件调用子组件的方法

在 React 中，父组件可以通过 ref 来调用子组件的方法。

首先，在子组件的定义中，使用 `React.forwardRef` 来将 ref 传递给子组件。例如：

const ChildComponent = React.forwardRef((props, ref) => {
  // 子组件的逻辑和代码

  // 暴露一个方法供父组件调用
  const childMethod = () => {
    // 方法的实现
  };

  // 将方法通过 ref 暴露给父组件
  React.useImperativeHandle(ref, () => ({
    childMethod
  }));

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

接下来，在父组件中，使用 `useRef` 来创建一个 ref，并将其传递给子组件。这样，你就可以通过该 ref 调用子组件的方法了。例如：

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

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

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

现在，当点击 "调用子组件方法" 的按钮时，父组件就会调用子组件的 `childMethod` 方法。记得确保先在父组件引入子组件，并在 JSX 中使用 `<ChildComponent ref={childRef} />` 的方式渲染子组件。

这样，你就可以在父组件中调用子组件的方法了。希望对你有所帮助！