react父调用子组件方法

在 React 中，父组件可以通过使用 `ref` 属性来调用子组件的方法。下面是一个示例：

import React, { useRef } from 'react';

const ChildComponent = React.forwardRef((props, ref) => {
  const childMethod = () => {
    // 子组件的方法逻辑
    console.log('子组件的方法被调用');
  };

  // 将子组件的方法传递给父组件的 ref
  React.useImperativeHandle(ref, () => ({
    childMethod
  }));

  return (
    <div>
      // 子组件的内容
    </div>
  );
});

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

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

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

export default ParentComponent;

在上面的示例中，`ChildComponent` 组件中的 `childMethod` 方法被定义并通过 `useImperativeHandle` 钩子函数暴露给了父组件。父组件 `ParentComponent` 中使用 `useRef` 创建了一个引用 `childRef`，然后通过将该引用传递给 `ChildComponent` 组件的 `ref` 属性，使得父组件可以通过 `childRef.current.childMethod()` 调用子组件的方法。

请注意，这种方式需要使用 `React.forwardRef` 和 `useImperativeHandle` 来进行子组件方法的透传。