react 18.2.0版本 函数组件怎么实现父组件调用子组件的功能

在 React 18.2.0 版本中，函数组件可以通过使用`useImperativeHandle`和`forwardRef`来使父组件调用子组件的功能。

具体实现步骤如下：

1. 在子组件中使用`useImperativeHandle`钩子函数，将需要暴露给父组件的方法返回给父组件使用。例如：

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

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    someMethod() {
      // 父组件可以调用该方法
    },
  }));
  return <div>子组件内容</div>;
});

export default ChildComponent;

2. 在父组件中使用`useRef`钩子函数来创建子组件的`ref`，并且将该`ref`传递给子组件。例如：

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

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

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

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

export default ParentComponent;

这样，父组件就可以通过`ref`来调用子组件中暴露的方法了。