react 函数组件ref调用子组件中的方法打印ref.current是undefined

您好！对于函数组件，我们无法直接在函数组件上使用 ref 属性。但是，您可以使用 `useRef` 钩子来创建一个 ref 对象，并将其传递给子组件。

下面是一个示例，展示了如何在父组件中调用子组件的方法并访问子组件中的 ref：

import React, { useRef } from 'react';

// 子组件
const ChildComponent = React.forwardRef((props, ref) => {
  const childMethod = () => {
    console.log('Child method called');
  };

  // 将 ref 关联到子组件的某个元素上
  React.useImperativeHandle(ref, () => ({
    childMethod,
  }));

  return <div>Child Component</div>;
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef(null);

  const callChildMethod = () => {
    childRef.current.childMethod();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </div>
  );
};

在这个例子中，我们使用 `useRef` 创建了一个 `childRef` 对象，并将其传递给子组件 `ChildComponent` 的 `ref` 属性。然后，我们在 `ChildComponent` 中使用了 `React.useImperativeHandle` 将子组件中的方法关联到 `ref` 上。最后，我们在父组件中调用 `childRef.current.childMethod()` 来调用子组件的方法。

希望能对您有所帮助！如果还有其他问题，请随时提问。