子组件调用父组件方法react用useref

在 React 中，可以使用 `useRef` 来创建一个引用对象，该对象可以在组件中保存一个可变值，并且在组件的整个生命周期中保持不变。这个对象可以在子组件中传递给父组件并调用父组件的方法。

下面是一个示例代码：

import React, { useRef } from 'react';

function Parent() {
  const parentRef = useRef(null);

  const handleClick = () => {
    console.log('Parent method is called');
  };

  return (
    <div ref={parentRef}>
      <Child parentMethod={handleClick} />
    </div>
  );
}

function Child({ parentMethod }) {
  const childRef = useRef(null);

  const handleClick = () => {
    parentMethod();
  };

  return (
    <div ref={childRef}>
      <button onClick={handleClick}>Call parent method</button>
    </div>
  );
}

在这个示例中，`Parent` 组件创建了一个 `parentRef` 引用，并定义了一个 `handleClick` 方法，该方法将在调用时打印一条消息。

`Parent` 组件还将 `parentRef` 引用传递给 `Child` 组件，并将 `handleClick` 方法作为 `parentMethod` 属性传递给 `Child` 组件。

在 `Child` 组件中，我们使用 `useRef` 创建了一个 `childRef` 引用，并定义了一个 `handleClick` 方法，该方法调用了传递给它的 `parentMethod` 方法。

最后，在 `Child` 组件中，我们将 `handleClick` 方法绑定到一个按钮的 `onClick` 事件上。当用户点击按钮时，`handleClick` 方法将调用 `parentMethod` 方法，从而调用 `Parent` 组件中定义的 `handleClick` 方法。