React 函数组件父组件调用子组件函数

子组件：使用forwardRef将 ref 转发到子组件。

import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { Popup } from 'antd-mobile';
import styles from './index.css';
interface GpupopProps {
  PopupContent: React.ReactNode;
}
export interface GpupopHandle {
  openPopup: () => void;
  closePopup: () => void;
}

const Gpupop = forwardRef<GpupopHandle, GpupopProps>(({ PopupContent }, ref) => {
  const [visible, setVisible] = useState(false);
//用于自定义暴露给父组件的实例值。它两个参数：ref 和一个创建实例值的回调函数。
  useImperativeHandle(ref, () => ({
    openPopup: () => setVisible(true),
    closePopup: () => setVisible(false),
  }));

  return (
    <div className={styles.Gpupop}>
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        {PopupContent}
      </Popup>
    </div>
  );
});

export default Gpupop;

父组件

<div  onClick={() => {
			//调用子组件方法
			  PopupRef.current?.openPopup();
          }}>
          openGpupop
</div>
 <Gpupop ref={PopupRef} PopupContent={<div>aaa</div>} />