antd modal实例方法的获取

父组件

import React, { useRef } from 'react'
import YaForm from './Form'
import YaModal from '@/component/Modal'
import { Button } from 'antd'
const YaLogin = () => {
	const modalRef = useRef()
	const handleShowModal = () => {
		modalRef.current.showModal()
	}
	const handleCloseModal = () => {
		modalRef.current.closeModal()
	}
	return (
		<div>
			<Button type="primary" onClick={handleShowModal}>
				点击登录弹窗
			</Button>
			<YaModal
				ref={modalRef}
				title="登录窗口"
				children={<YaForm handleCloseModal={handleCloseModal} />}
			/>
		</div>
	)
}

export default YaLogin

modal组件

import React, { useState, forwardRef, useImperativeHandle } from 'react'
import { Button, Modal } from 'antd'
const YaModal = (props, ref) => {
	const [isModalVisible, setIsModalVisible] = useState(false)
	useImperativeHandle(ref, () => {
		return {
			showModal,
			closeModal,
		}
	})
	const showModal = () => {
		setIsModalVisible(true)
	}
	const closeModal = () => {
		setIsModalVisible(false)
	}
	const handleOk = () => {
		setIsModalVisible(false)
	}

	const handleCancel = () => {
		setIsModalVisible(false)
	}
	return (
		<div>
			<Modal
				title={props.title ? props.title : '弹出窗'}
				visible={isModalVisible}
				footer={props.footer ? true : false}
				onOk={handleOk}
				onCancel={handleCancel}
			>
				{props.children}
			</Modal>
		</div>
	)
}

export default forwardRef(YaModal)